컨텍스트
리액트 16.3 버전부터 제공하기 시작함
이때 useContext 훅이 도입됨
이거랑 useState, useReducer 쓰면 전역 상태 관리 가능함
근데 리액트는 이거 전역으로 쓰는 거 별로 안 좋아했음
상태 하나 바뀔떄마다 모든 컨텍스트가 죄다 리렌더링 되어서 불필요한 리렌더링이 발생하기 때문
-------------------------------------------------------------------------------
const CountStateContext = creatContext({
count:0,
setCount: ()=>{}
})
<CountStateContext.Provider
value={{count, setCount}}
/>
{children}
</CountStateContext.Provider>
export const useCountStateContext = () => useContext(CountStateContext);
내가 context 쓰는 법...
책에서는 각각 컴포넌트에 useContext 와, CountStateContext를 불러서 쓰는데
이러면 import문이 하나 더 늘어서 그냥 나는 안에서 export 하는 편이다
creatContext()안에 초기값을 설정하는데, 책에서는 기본값을 딱히 추천하진 않는다
기본값 자체가 유용하지 않다고하며, 에러가 발생할 수도 있다고 한다
<= 왜지
컨텍스트 값이 바뀌게 되면 해당 상태 값은 리렌더링된다
그러니까 모든 컨텍스트 컴포넌트가 리렌더링 된다
이거 때문에 memo 많이 씀
메모이제이션
연산 결과를 메모리에 저장해두고 동일한 연산이면
앞서 저장한 결과를 재사용
const MemoizedProvider = memo(({ children }) => (
<CountStateContext.Provider value={{ count, setCount }}>
<CountStateContext2.Provider value={{ count2, setCount2 }}>
{children}
</CountStateContext2.Provider>
</CountStateContext.Provider>
));
export const useCountStateContext = () => useContext(CountStateContext);
+
useMemo
https://www.youtube.com/watch?v=e-CnI8Q5RY4
재렌더링이 일어나면 리액트는 돔을 비교함 (얕은 비교 - 기본형은 값 비교, 객체는 참조 비교 -)
context는 해당 state를 쓰는 컴포넌트가 렌더링 될 때마다 값을 비교함
그러니까 딱히 context 값이 변하지 않았는데도 렌더링 할 때, 해당 state 쓰는 컴포넌트를 몽땅 렌더링하는 거임
이런 문제로 인해서 등장한 selector 라이브러리들
예를 들면 리코일이 있고 chatGPT한테 물어보니까
그렇다고 한다
기본 동작을 변경하는 거임
아무튼 컨텍스트는 리렌더링을 발생 시킴
컴포넌트의 부모가 렌더링 되든가 / 업데이트 되는 상태를 가지고 있든가 하면 렌더링 되는 거임
1. 컨텍스트 값이 안 바뀌었는데 자식이라는 이유로 억울하게 렌더링 되었다면
react.memo 를 쓰든가 내용을 끌어올리든가
'TIL' 카테고리의 다른 글
컴퓨터의 이해 필기노트 (0) | 2024.06.02 |
---|---|
리액트 기초 (0) | 2024.04.25 |
기초1 (0) | 2024.04.11 |
리액트 지역 상태 전역 상태 (0) | 2024.04.11 |
strategy template 패턴 (0) | 2024.04.11 |
댓글