[React] React 주요 개념

01. 가상DOM

가상 DOM은 말 그대로 가상의 DOM이다.
브라우저가 화면을 그리는데 필요한 모든 정보가 포함된 실제 DOM에 비해 가볍다.
리액트는 SPA이고 DOM이 동적으로 자주 변경되게 되는데,
무거운 실제 DOM 대신 가벼운 가상 DOM을 이용하여 계산을 한 후, 변경이 필요한 부분만 실제 DOM에 반영한다.

02. JSX

Javascript 확장 문법이다.
HTML과 유사하게 생겼기 때문에
document.createElement 함수보다 쉽게 UI를 표현할 수 있지만
HTML과는 완전히 다른 것이다.

03. React Component vs React Element

리액트 컴포넌트는 클래스, 엘리먼트는 컴포넌트의 인스턴스이다.
컴포넌트는 클래스나 함수를 통해 만들 수 있다.
엘리먼트는 JSX 문법을 사용하여 만들 수 있다. <Component />

04. State

화면이나 컴포넌트에서 계속 바뀌어야 하는 값, 동적인 데이터를 저장한다.
일반 변수와 다르게 State의 값이 변경되면 함수가 재실행(= 리렌더링) 되므로 바뀐 값이 화면에 반영된다.
또한, 함수가 재실행되어도 이전 State 값이 어딘가에 저장되어 있어 값이 초기화 되지 않는다.

05. Props

부모 컴포넌트가 자식 컴포넌트에 매개변수를 통해 데이터를 전달할 수 있는데, 이 매개변수를 props라고 부른다.
props는 읽기 전용으로 수정하면 안된다.
props를 이용하면 컴포넌트의 재사용성이 크게 증가한다.

06. 리렌더링의 조건

1. state가 변경되는 경우
2. props 값이 변경되는 경우
3. 부모 컴포넌트가 리렌더링되는 경우, 자식 컴포넌트 리렌더링
   → 자식 컴포넌트가 리렌더링되는 것을 막고 싶을 때 React.memo 훅을 사용한다

07. React Component의 생애주기

1. mount : 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입되는 것.
2. update : DOM에 존재하는 컴포넌트를 re-rendering 하여 업데이트 하는 것
3. unmount : 컴포넌트가 DOM에서 제거되는 것

각 생애주기에서 특정 작업을 할 수 있다.