이번 프로젝트를 진행하면서 가장 사용해 보고 싶었던 것이 전역 상태관리였다. redux 보다 더 간단히 사용해 볼 수 있는 ContextApi를 써보았다.
사실 프로젝트 구조를 보면 contextApi를 쓸 필요가 없었다 ㅎㅎ
navbar에서 바로 모달로 로그인을 시키기 때문이다.
어디다 써보지 어디다 써보지 벼르고 있다가 그냥 억지로 만들어서 써보기로했다.👍
context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.
즉, 컴포넌트 depth에 따라 props -> props -> props를 전달해 줄 필요가 없다!
-
context의 주된 용도는 네스팅에 네스팅에 네스팅된 컴포넌트에 데이터를 전달하는 것.
-
context를 사용하면 컴포넌트를 재사용하기 어려워지기 때문에 잘 선별해서 쓰자 ( 나는 그냥 써보고 싶어서 적용해 보았다 😄 )
사용법
React.createContext( defaultValue)
- 나의 경우, 로그인을 navbar에서 모달을 띄워 진행한다.
- 따라서 navbar.js에서 Context 객체 생성.
- ❗️ 주의할 점.
- Context 객체를 생성할 때 들어가는 defaultValue 매개변수는 적절한 Provider를 찾지 못했을 때에만 쓰이는 값이다.- 즉 useState('값') 처럼 기본값으로 사용되는 것이 아니다.
Context.Provider
-
context.Provider는 해당 컴포넌트에 context의 변화를 알리는 역할을 한다. -
value prop이 바뀔 때 마다 렌더링!
useContext(Mycontext)
-
navbar에서 생성한 context객체를 받아 현재 context값을 반환한다.
-
나의 경우엔 provider로 전달하는
LoginModal에서useContext를 사용해 주었다. -
참고로 console로 찍어볼 때에는 useContext.isLoginOn 과 같이 써주면 확인 가능.
-
useContext를 호출한 컴포넌트는 context값이 변경되면 리렌더링을 하게 된다.
로그인이 성공할 때 setState()를 통해 state값을 변경시켜 주면 완료~
