Context를 통한 의존성 관리, 전역 상태 관리에 대해 자세히 알아본다.
Justand와 Redux를 도입하기 전, React에서 제공하는 Hook으로 고쳐보고 싶었다.
전체 설명
코드는 아래와 같다!
Work19: 최상위 컴포넌트, 하위 컴포넌트가 전부 state를 써야해서 상태 선언을 Work에서 진행한다.Hello:Work19의 state와 setState를 사용해서, props로 받아온다ㅣ.Home:Work19의 state와 setState를 사용하지 않지만,About컴포넌트가 써야하기에 props로 받아온다.About:Home의 하위 컴포넌트,Work19의 state와 setState를 사용한다.
About이 Work19의 props를 필요로 하기에, About의 setState를 사용하면, 모든 컴포넌트가 재렌더링 될 것이다.
결과는 아래와 같다.
난 About과 Hello에만 state를 썼고 이 둘만 재렌더링을 하고싶다.
나는 react의 Hook중에 useContext를 활용하여 이 문제를 해결하겠다.
그림으로 표현하자면 이렇다
Work19: 최상위 컴포넌트ContextProvider: Context를 뿌려주는 컴포넌트, value에 state(상태)와 setState를 넣어준다Hello:Work19컴포넌트에 바로 밑에 속한 컴포넌트, Context의 state와 setState를 사용Home:About컴포넌트를 담고있는 컴포넌트, Context의 상태를 사용하지 않음About:Home컴포넌트에 속함, Context의 state와 setState를 사용
가정1
Hello 컴포넌트의 setState를 작동시킬시, state를 사용하는 About도 재렌더링 될 것이며, Home은 렌더링 되지 않을 것이다.
About의 setState 실행
가정2
가정대로 진행된다, 만약 Home에 setState를 공유한다면 어떨까? setter 역할인 setState또한 props로 넘겨줬을때, state가 바뀌는 상황에 재 렌더링 되는 것 처럼 다시 렌더링이 될 것이다.
About의 setState 실행
전부 렌더링 되는 것을 알 수 있다. 이렇게 쓰면 안된다..ㅎㅎ
Context를 써도 하위 컴포넌트가 전부 렌더링 되기에 안쓰이는 최상단 컴포넌트에 상태를 받아오지 말자.
FE