리액트에서 서로 다른 두 컴포넌트에 같은 데이터가 필요하다고 할 때,
컴포넌트가 부모자식 관계로 되어있지 않다면 컴포넌트 간의 직접적인 데이터 전달은 어렵다.
데이터를 자식 컴포넌트로 보내고, 다시 그 데이터를 필요한 컴포넌트로 전달해야한다. 하지만 이렇게 Prop이 많아지면 이 prop가 어디에서 왔는지 확인하기 정말 어려워진다.
그렇기때문에 각 어플리케이션에 알맞은 상태관리 툴을 선택해 상태를 잘 관리하는 것이 중요하다.
나 같은 경우에는 회사 앱 프로젝트를 작업하며 점점 늘어져가는 페이지 deps에 혼란을 느꼈다. (코드가 돌아가긴 하는데 이건 뭔가 아닌거같다는 느낌이 들었다) 그러던중 사수분께서 Context API로 관리해 보라는 말씀을 해주셨고 바로 적용을 해보았다.
🙃 Context API
ContextAPI는 react는 16.3 버전부터 정식적으로 지원하고 있다.
Context API는 Redux와 같은 상태관리 라이브러리와는 달리Provider,useContext,createContext개념만 알면 적용가능하다. (그럼에도 Redux와 같은 상태관리 라이브러리를 쓰는 이유는 밑에서..)
✍🏻 createContext
먼저 createContext를 선언할 파일을 하나 만든다. (App.js에서 만들어도 상관은 없지만 컴포넌트 분리를 위해 나누었다)
- context 객체를 만든다. 컴포넌트가 이 context를 사용하려면 해당 컴포넌트 상위에 provider로 부터 context를 정의한 변수 MyNameContext를 감싸면 된다
- 여기서 name은 값을 저장할 변수이고 changeName은 name을 바꿀 함수이다.
✍🏻 Provider
createContext를 선언한 파일 안에서 Provider를 사용 할 것이다.
(이걸 이제 App.js에서 import 할 것이기 때문!)
- provider는 정의한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
- provider를 전달하는 변수는 꼭!!! value가 있어야한다.
위에서 만든 파일을 App.js에 import 한다.
선언한 MyNameStore를 context를 사용하고 싶은 컴포넌트 상위에 감싼다
이렇게 감싸게 되면 Content1과 Content2 컴포넌트에서는 Context에서 선언한 name과 changeName을 사용 할 수 있다.
✍🏻 useContext
useContext를 통해 Context 값들을 불러온다.
- Content1에서는 name을 '호정'으로 바꿀 것이다
- Context2에서는 name을 선언 할 것이다
위와 같이 ContextAPI를 사용한다면 provider하위에 context를 가진 component는 provider의 value로 가진 state가 변화할 때마다, 전부 re render된다.
Context로 관리 하는 값이 위의 예시처럼 하나라면 성능에 큰 영향이 없겠지만 실제 프로젝트에서는 Context로 관리되는 값들이 많을 수도 있다. 관리하는 값이 많아질 수록 불필요한 render가 많아진다는 이야기다.
이러한 비효율을 대처하기 위해 나온 여러 상태관리 라이브러리들이 있다.
대표적으로는 Redux와 ReactQuery, Recoil이 있다.
ContextAPI를 공부하면서 여러 라이브러리들에 대해서도 알아보았는데 (아주 살짝) 나중에 기회가 된다면 회사 프로젝트에도 상태관리 라이브러리를 도입한다면 좋을 것 같았다.
또한 현재 내가 따로 하고 있는 스터디에서는 ReactQuery를 쓰는데 상태관리 라이브러리는 처음이라 많이 헤맸었는데 이제는 뭔가 알아가는거 같아 이 부분도 나중에 포스팅 해보려한다!
