리액트 컨택스트

컨텍스트

 

 

리액트 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

 

 

리액트는 가상 돔을 띄워서 먼저 바꾸고 바뀐 부분만 실제 돔에게 반영함

useMemo는 만약 연산이 같다면 실제 돔에게 반영하지 않는 거

 

이거 보면 됨

 

https://www.youtube.com/watch?v=e-CnI8Q5RY4

 

 

재렌더링이 일어나면 리액트는 돔을 비교함 (얕은 비교 - 기본형은 값 비교, 객체는 참조 비교 -)

context는 해당 state를 쓰는 컴포넌트가 렌더링 될 때마다 값을 비교함

그러니까 딱히 context 값이 변하지 않았는데도 렌더링 할 때, 해당 state 쓰는 컴포넌트를 몽땅 렌더링하는 거임

 

 

이런 문제로 인해서 등장한 selector 라이브러리들

예를 들면 리코일이 있고 chatGPT한테 물어보니까

 

그렇다고 한다

기본 동작을 변경하는 거임

 

 

아무튼 컨텍스트는 리렌더링을 발생 시킴

컴포넌트의 부모가 렌더링 되든가 / 업데이트 되는 상태를 가지고 있든가 하면 렌더링 되는 거임

 

1. 컨텍스트 값이 안 바뀌었는데 자식이라는 이유로 억울하게 렌더링 되었다면 

 

react.memo 를 쓰든가 내용을 끌어올리든가