[WIL, React] Lifecycle, 상태주기, 생명주기

화면에 구성되는 데이터 중, 서버에 저장되지 않는 것들은 어디에 저장될까?

 

클라이언트 사이드 메모리 위에 저장되는 것이 일반적이다.

 

사소한 내용들까지 실시간으로 서버에 저장하려 한다면 불편함과 과도한 서버비용을 지불해야 하기 때문이다.

 

리액트에서 메모리 위에 저장하는 값 중에서 대표적으로 Props와 State가 있다.

 

State는 상태라고 부르고 상태 관리란 State를 관리하는 것을 말한다.

 

React Hook을 사용하는 함수형 컴포넌트의 생명주기는 다음 그림과 같다. 

출처 : https://wavez.github.io/react-hooks-lifecycle/

초기 컴포넌트가 생성될때를 Mounting 이라고 하고, 생성 후 그리고 소멸전 props나 state가 업데이트 되는 때를 Updating이라고 한다. 

---

1. 컴포넌트 마운팅

리턴값을 렌더링 하고 렌더링한 상태를 가상돔에 그린다.

---

 

가상DOM과 DOM의 엘리먼트를 비교하고 만약 가상DOM의 엘리먼트들과 DOM의 엘리먼트에서 다른부분이 감지되면 그 부분만 DOM에 업데이트 한다. 초기 렌더링의 경우 현재 컴포넌트에 대한 정보가 없기때문에 현재 컴포넌트에 대한 모든 부분을 DOM에 그린다.

---

컴포넌트내부에 useLayoutEffect와 useEffect Hook을 실행한다.

여기까지가 마운팅 과정이다.

---

2. 업데이팅

직전에 실행된 useEffect 유저의 인터랙션등에 의해 state 또는 props 값이 변경된다.

그 후 가상DOM을 변경된 State와 Props에 맞추어 다시 그린다.

---

가상DOM과 DOM의 엘리먼트들을 비교한다. 다른부분이 감지되면 그 부분만 DOM에 업데이트 한다. state나 props의 값이 변했지만 UI에 변화가 없다면 DOM을 업데이트 하지 않는다.

---

useLayoutEffect나 useEffect Hook을 실행한다.

여기까지가 업데이팅 과정이다.

---

컴포넌트가 소멸할때 useEffect 내부의 리턴에 정의된 Cleans up function을 실행한다.

그리고 컴포넌트는 소멸한다.

---

**state는 렌더링이나 데이터 흐름에 사용되는 값만 포함시켜야 한다.

왜냐하면 state가 변경되는 경우 컴포넌트가 재 렌더링 되기 때문에 불필요한 렌더링이 발생하기 때문이다.

state는 자바스크립트의 객체이다.