모든 리액트 컴포넌트는 라이프사이클(수명 주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링 되기 전, 준비 과정에서 시작하여 페이지가 사라질 때 끝납니다. 컴포넌트의 라이프사이클 메서드를 사용하는 경우는 다음과 같습니다. 컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리해야 하는 경우 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 하는 경우 불필요한 업데이트를 방지해야하는 경우 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능합니다. 함수 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있습니다. 📌 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지입니다. Will 접두사가 붙은 메서드 : 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 ..

웹 어플리케이션을 만들다 보면 반복되는 코드를 작성해야 할 때가 있습니다. // IterationSample.js const IterationSample = () => { reutrn ( 눈사람 얼음 눈 바람 ); }; export default IterationSample; 다음과 같이 .. 코드가 반복되는 양이 많아질 수록 코드양은 늘어나고 파일용량도 쓸데없이 늘어날 것입니다. 또한 데이터가 유동적이라면 이런 코드로는 관리할 수 없습니다. 리액트 프로젝트에서는 이러한 반복적인 내용을 효율적으로 관리하는 방법을 제공합니다. 📌 자바스크립트 배열의 map() 함수 📚 문법 자바의 배열 객체의 내장 함수인 map 함수를 이용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함..

일반 HTML에서는 DOM 요소에 이름을 달 때 id 값을 사용합니다. 특정 요소에 id 값을 달면 CSS에서 특정 id에 스타일을 적용하거나, 자바스크립트에서 해당 id를 찾아 작업하기도 합니다. 이렇게 HTML에서 id 를 사용하여 DOM에 이름을 다는 것처럼 리엑트 프로젝트 내부에서도 DOM에 이름을 다는 방법이 있습니다. ref를 사용하지 않은 코드를 보며 ref의 필요성을 알아보고, ref를 사용한 코드를 작성해보겠습니다. 이후 컴포넌트에 직접 ref를 달아 사용하는 코드도 작성해보겠습니다. 📌 ref는 어떤 상황에서 사용해야 할까? 📚 ref 의 주요 목적 예제를 통해 ref의 필요성을 알기 전에 REACT 공식 문서(https://ko.reactjs.org/docs/refs-and-the-d..

이벤트(event)란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 의미합니다. 3장에서 사용했던 마우스 클릭이나 마우스 커서 올리기, 입력 등등이 이벤트의 예시입니다. html의 alert와 같이 사용자가 웹 브라우저에서 상호작용하는 것이 이벤트(event)입니다. 리액트의 이벤트는 순수 JavaScript 혹은 jQuery를 사용한 웹 어플리케이션에서 이벤트를 다루는 것과 동일합니다. 기존 HTML DOM Event를 알고 있다면 리액트의 컴포넌트도 쉽게 다룰 수 있을 것입니다. 클래스형 컴포넌트와 함수형 컴포넌트에서 이벤트를 다루도록 합시다 📌 리액트 이벤트 시스템 📚 이벤트를 사용할 때 주의사항 1. 이벤트 이름은 카멜 표기법으로 작성합니다. HTML의 onclick은 리액트에서 on..

3장에서 클래스형 컴포넌트와 함수형 컴포넌트에 대해 코드를 작성하며 배웠습니다. 선언 방식과 컴포넌트의 차이와 props, state 에 대한 자세한 설명과 관련 코드는 다음 링크를 참고하시길 바랍니다. https://daradarav.tistory.com/14 [React] 03. 컴포넌트 📌 컴포넌트 앞선 포스트에서 컴포넌트(component)는 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 결정하는 선언체라고 배웠습니다. 리액트의 컴포넌트는 함수형 컴포넌트와 클래스형 daradarav.tistory.com 이번 챕터에서는 지난 포스트에서 다뤘던 컴포넌트에 대해 간단히 정리하겠습니다. 개념을 간단히 되짚어본 뒤, 클래스형 컴포넌트와 함수형 컴포넌트의 차이를 정리해보겠습니다. 컴포넌트 목적에 따라 나..

앞선 포스트에서 컴포넌트(component)는 리액트 프로젝트에서 특정 부분이 어떻게 생길지를 결정하는 선언체라고 배웠습니다. 리액트의 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 두 가지로 선언될 수 있습니다. 클래스형 컴포넌트와 함수형 컴포넌트를 비교하며 컴포넌트를 생성해보겠습니다. 또한 컴포넌트에서 사용하거나 렌더링 하는 데이터를 담는 props와 state의 차이점과 선언 방식을 배우겠습니다. 📌 클래스형 컴포넌트 📚 클래스형 컴포넌트 컴포넌트를 선언하는 방식은 클래스 컴포넌트와 함수 컴포넌트로 나뉩니다. 클래스형 컴포넌트와 함수 컴포넌트는 state 기능 및 라이프 사이클 기능, 임의 메서드 정의 등에서 차이가 납니다. 각 방법으로 작성된 코드를 보면서 차이점을 비교해보자. 📃 클래스 컴포넌..

리액트는 HTML과 비슷한 형식의 코드 작성 방식인 JSX를 통해 코드를 작성합니다. 오늘은 JSX의 기능과 규칙들을 배워보도록 하겠습니다. 또한 코드의 가독성과 작성을 돕는 ESLint와 Prettier도 다뤄보도록 하겠습니다. 코드 이해하기 src/App.js 파일을 열어보면 다음과 같은 코드가 있을 것입니다. import logo from './logo.svg'; import './App.css'; function App() { return ( Edit src/App.js and save to reload. Learn React ); } export default App; 위의 코드를 하나씩 이해해봅시다. 📚 import 구문 import logo from './logo.svg'; import '...

본격적으로 React에 대해서 배우기 전에 Visual Studio Code를 통해 프로젝트를 생성하는 방법에 대해 알아보겠습니다. 프로젝트 생성 시 만들어진 프로젝트의 폴더와 파일들이 의미하는 바도 함께 배워보겠습니다. 프로젝트 생성 🛠 프로젝트 작업에 사용할 폴더를 만듭니다. 폴더를 Shift + 우클릭 후 PowerShell 터미널 열기를 클릭합니다. 🛠 yarn create react-app 을 입력합니다 🧨 Warning 1) 윈도우의 경우, 허가되지 않은 스크립트라는 말이 나오는 경우 윈도우 검색창에 PowerShell을 검색 후, PowerShell 아이콘을 우클릭 하여 관리자 권한으로 실행 Set-ExecutionPolicy Unrestricted 입력 후 엔터 y를 눌러서 허가 2) 맥북..

📌 왜 리액트(React)인가? 최근 몇 년간 자바스크립트(JS, JavaScript)는 개발자들의 뜨거운 관심을 받고 있습니다. JS는 단순한 스크립트 언어를 넘어 웹 애플리케이션에서 가장 핵심적인 역할로 발돋움했습니다. 그러나 JS만으로는 프런트 엔드 사이드쪽의 애플리케이션 구조를 관리하기에는 무리가 있습니다. 이를 해결하기 위해 React, Angular, Ember.js 등 수많은 프레임워크들이 개발되었습니다. 이번 포스트에서는 여러 프레임워크 중 React가 중심이 된 이유와 개발 환경 설정을 해보겠습니다. 또한 리액트의 주요특징인 Virtual DOM에 대해서 알아보겠습니다. 📚 왜 리액트인가? 프론트 엔드 개발을 하다보면 MVC, MVVM, MVW 등과 같이 MV~로 시작되는 아키텍처들을 들..