[리액트][함수] 컴포넌트 컨텍스트 & 사이드 이펙트 컨텍스트

컴포넌트 컨텍스트는 각 렌더링 마다 고유한 컨텍스트(스코프)를 가진다.

이걸 어렵게 생각 하지말자 for(let int = 0; int < n; int++){ 컨텍스트(scope)} 에서 매 반복마다 int가 각각 다른 값인 것과 같다.

1.useEffect 훅의 경우 미래는 모르겠지만, 현재는 리액트 컴포넌트 사이클 외부에 해당한다. 그래서 내부에서 리액트 훅을 사용 할 수 없다. 내부 컨텍스트를 최신화 하기 위해서 [deps]로 변경 되는 모든 변수를 넣어주자. 또 클린업 함수를 신경쓰자.

2. useRef를 통해서도 가능하지만 사이드 이펙트 수준을 넘어서 비제어화 하니 최대한 안쓰는게 좋다.

3. useCallback을 적절히 사용하자.

4. useMemo로 최적화 해야 할 상황이 왔다면 코드를 잘못짠게 아닌지 잘 생각해보자(공식문서에서도 비권장한다.)

 

이 내용을 누구나 이해하기 쉽게 잘 쓰여진 글들을 발견해서 링크 저장한다.

https://simsimjae.tistory.com/400

 

useEffect 완벽 가이드 1편 - 왜 옛날 값을 자꾸 가져오지?

 

https://simsimjae.tistory.com/401?category=384814 

useEffect 완벽 가이드 - 2편, 의존성 배열 deps와 클린업 함수

https://simsimjae.tistory.com/404?category=384814 

useEffect 완벽가이드 - 3편

 

https://rinae.dev/posts/a-complete-guide-to-useeffect-ko