[React] useEffect 공부 정리

 

 

모든 렌더링에는 고유한 state가 있다

 

랜더링 시 그 안에 있는 State의 데이터가 시간이 지난다고 바뀌는 것이 아니다.

컴포넌트가 재 호출되고, 각각의 랜더링마다 격리된 고유의 count 값을 "보는" 것 입니다.

 

state를 변경하면, 해당 state의 값이 올라가며, 이 state를 참조하고 있는 함수는 랜더링 당시의 state를 보고 있게 된다.

각각의 랜더링은 고유한 버전의 함수를 리턴하게 되고, 각각의 버전은 고유의 state를 기억하게 됩니다.

 

---

1. state변경이 일어나면, 컴포넌트는 리액트에게 상태 변경을 요청한다. 

 

2. 리액트는 컴포넌트에 변경사항이 적용된 랜더링 결과물을 만들고 브라우저에게 dom에 추가한다.

 

3. 이후 useEffect 의 콜백함수 내용을 실행한다. (랜더링 당시의 state값을 바라보고 있다는 것이 중요! 그렇기에 클린업이 가능한 것임)

---

 

"컴포넌트의 랜더링 안에 있는 모든 함수는 (이벤트 핸들러,  이펙트, 타입아웃이나 그 안에서 호출되는 API 등) 랜더(render)가 호출될 때 정의된 props와 state 값을 잡아둔다."

 

같은 랜더링 스코프에서는 불변성을 갖는 state와 props이기 때문에, 컴포넌트 안에서 일찍, 늦게 평가/실행 받는 것은 의미 없습니다.

다시 말하지만 한번의 랜더링 속에선 불변성에 따라 state와 props는 모두 같은 값을 바라봅니다.

 

 

라이프사이클이 아닌 동기화!!!! <--- 좀더 공부해야하는 부분!!!!
리액트는 우리가 지정한 props와 state에 따라 DOM과 동기화합니다. -> 랜더링 시 "마운트" 와 "업데이트" 의 구분이 없습니다.

 

 

리액트에게 이펙트를 비교하는 법을 가르치기

 

의존성 배열 : 리액트가 함수의 실행 결과까지 알 수 없기에, 약속하는 것이다. 랜더링 스코프에서 해당 의존성 배열에 들어간 값 외의 값은 쓰지않겠다고 약속하는 것!!

리액트는 의존성 배열을 살펴보고 해당 props, state가 변경되지 않았다면, 스킵하고 넘어갑니다. 그래서 불필요한 재랜더링을 막을 수 있는 것이죠.

 

 

useEffect의 의존성으로 거짓말하면 아주그냥 혼난다

 

 

이펙트가 자급자족 하도록 만들기!!