[React 입문] useState | 리액트 불변성 | 랜더링

1. useState 

const [state, SetState] = useState('initialState');

▶ state는 ui 바꾸기 위해서 & 랜더링을 다시 하기 위함

▶ 구조분해할당으로 받아서 사용 = return 배열 [ 초기값 갖고 있는 변수, 상태를 변경하는 메서드 Set ]

▶ 특정 기능을 수행하는 것들 = hook (useState, useEffect, useContext, useMemo 등)

 

 

2. 리액트 라이프 사이클 : 컴포넌트 생명주기 

▶ mounting - updating - unmounting

▶ (화면보임) - (화면갱신) - (화면에서 죽음) 

▶ 컴포넌트가 화면갱신을 하기 위해 "랜더링"(state가 변경)되야함.

 

 

3. 불변성

▶ 메모리에 있는 값을 변경할 수 없는 것. (원본 데이터 변형 x)

▶ 원시데이터 : 숫자, 문자, bloolean => 불변성 있음 (메모리 주소가 변함)

▶ 객체, 배열, 함수 => 불변성 없음 (값만 같지, 메모리 위치가 다름)

▶ 배열 /객체는 스프레드 문법을 활용하여 데이터 수정을 해야함.

 

 

4. 컴포넌트

▶ 리액트의 핵심 빌딩 블록

▶ 명령형 : 기존 방법 DOM객체를 직접 조작(querySelector~) 했었지만, id 찾아서 create + append

▶ 선언형 : 리액트는 화면에 어떻게 그려야할지는 이미 정해져있음 (jsx문법으로!)

                

5. 렌더링

▶props와 state의 상태에 기초하여 UI를 어떻게 구성할지를 컴포넌트에 요청하는 작업

▶[예시]

UI : 음식  / 컴포넌트 : 음식 만드는 주방장 / 리액트 : 웨이터

 

(1) 렌더링 일으키는 것 (트리거) : UI(음식)을 주문하고 주방으로 전달하는 것

(2) 렌더링 하는 것 (랜더링) : 주방에 컴포넌트가 UI를 만들고 준비하는 것

(3) 렌더링 결과는 실제 DOM에 커밋한다 (커밋) : 리액트(웨이터)가 준비된 UI(음식)을 손님 테이블에 놓는 것.

 

** 렌더링 트리거

(1) 첫 리액트 앱 실행 되었을때

(2) 컴포넌트 내부 state가 변경되었을때 

     컴포넌트의 새로운 props가 들어올때 

     상위 부모 컴포넌트가 렌더링 발생할 때

 

** 리렌더링

(1) 나중에 virtual DOM은 숙련과정에서 공부 예정

(2) 리렌더링이 발생하여, 여러상태가 변경되면 리액트는 큐 자료구조에 넣어 순서 관리