react (생명주기, DOM 복습)

생명주기(LifeCycle) 
리액트 생명주기란? 
리액트 컴포넌트는 각각 Mount-> Update -> Unmount의 과정을 걸침
리액트 생명주기란 컴포넌트 중심 라이브러리의 집합체라고 보면됨. 모든 컴포넌트에는 각각의 생명주기가 존재하고 각 생명주기에 맞는 메서드 들이 있음 

Mount될때 
1. constructor ( 생성자)
컴포넌트가 맨 처음 만들어 질때 호출 
2. getDerivedStateFromeProps 
부모컴포넌트로부터 props를 전달받을때 state에 값을 일치시키는역할
마운트 될때 뿐만아니라 리렌더링될떄에도 호출이됨
3. render
최초 mount가 준비완료되면 렌더링하는 메서드
컴포넌트를 DOM에 마운트하기위해 사용 
4. componentDidMount 
컴포넌트가 브라우저에 표시가 된 후 호출되는 메서드 

Update될때 
컴포넌트가 갱실될때 즉 리렌더링되는 경우 
*리렌더링이 되는 경우는 state가 변경되거나, props가 변경되거나, 부모컴포넌트가 변경될때 등 
1. getDerivedStateFromProps 
Mount 과정에서도 동일하게 호출된 메서드
부모컴포넌트로부터 props를 전달받을때, state에 값을 일치시키는 역할을 하는 메서드
2. shouldComponentUpdate 
리렌더링 여부 판단(함수 호출 결과 : true/false)
-true인경우 : 리렌더링 진행o
-false인경우 : 리렌더링 진행x
함수형컴포넌트에서 memo, useMemo, useCallBack이 역할을 대신함.
3. render 
변경사항 반영이 다 되어 준비완료되면 호출되는, 즉 렌더링 하는 메서드
컴포넌트를 DOM에 마운트하기 위해 사용
4. getSnapshotBeforeUpdate 
컴포넌트에 변화가 일어나기 직전 DOM의 상태를 저장
*스냅샷 형태의 데이터다 라는건 특정한 시점의 복사본 이라고 이해하면 쉬움
componentDidUpdate 함수에서 사용하기위한 스냅샷 형태의 데이터
5. componentDidUpdate
컴포넌트 업데이트 작업 완료 후 호출 
이부분은 깊게 이해하지 않아도 되고 혹시 이걸 써야겠다 라고 하면 그때그때 찾아서 해도 상관없음.

Unmount
컴포넌트가 DOM에서 제거되는 시점. 
componentWillUnmount
컴포넌트가 사라지기 전 호출되는 메서드 
useEffect의 return과 동일함 

DOM과 VirtualDOM
React나 Vue는 가상돔을 사용해서 원하는 화면을 브라우저에 그려주고(Rendering) Angular는 돔을 직접 조작함

DOM(Document Object Model)이란?

위 이미지는 수많은 컴포넌트로 구성된 웹페이지. 이 페이지를 문서(Document)라고 하고 페이지를 이루는 컴포넌트를 엘리먼트(element)라고함.
DOM은 이 엘리먼트들을 tree형태(DOM TREE)로 표현한 것
tree의 요소 하나하나를 노드라고 부르고 각각의 노드는 해당 노드에 접근(querySeletor)과 제어(DOM조작)를 할수있는 API를 제공함
*API란 말이 헷갈리면 단순하게 HTML요소에 접근해서 수정할 수 있는 함수 정도로 이해