useContext
useContext란 내게 필요한 props를 글로벌하게 사용가능하도록 react에서 제공해주는 hook의 기능 중 하나입니다.
우리는 useContext를 활용하여 props를 필요에 따라 어디든 '순간이동' 시킬 수 있으며 2중 3중...n중으로 props를 내려주는 과정에서 불필요하게 발생 되었던 데이터 유실을 방지할 수 있게 됩니다.
이러한 기능을 제공해주는 글로벌 스테이트는 Rest의 redux,ApolloClient의 apolloCacheState 등이 있어 활용할 수 있겠지만 범용적으로 자주 쓰이는것은 역시나 ContextAPI이다.
rest
1. useContext의 필요
useContext를 사용하면 모든 중간의 부모를 건너뛰고 가장 마지막 컴포넌트에 바로 사용할 수 있게 된다.
흔히 container 에서 presenter 컴포넌트로 props를 내려주게 되는데 이경우 useContext는 불필요하게 느껴질 수 있습니다.
하지만 우리가 개발하는 서비스가 커지고 점점 그 규모를 감당 할 수 없게 되면 순식간에 props를 3중 이상 내려주게 되는 경우가 빈번히 발생 합니다.
특히 로그인 상태관리의 경우 백엔드로부터 받은 accessToken을 모든페이지에 뿌려주어야 하는데 이경우 요긴하게 사용할 수 있게된다.
2. useContext의 사용법
- 최상단 컴포넌트에서 createContext를 import 이후 'GlobalConText'라는 변수에 담아 내보낼 준비를 한다.
- 사용하고자 하는 state를 value값에 담아 변수로 지정한다.
- 하위 컴포넌트를 GlobalContext.Provider로 감싸준 후 value값을 보내준다.
- context를 사용하고자 하는 컴포넌트에서 앞서 변수로 지정한 GlobalContext를 import한다
- useContext도 import하여야 한다.
- GlobalContext에 value 값으로 지정되어있는 state값을 사용할 수 있다.
3. 마치며
아직 실무에서 context를 적극적으로 활용해본적이 없어 얼마나 편한지를 기술할 수는 없지만
당장 3단계의 컴포넌트를 넘길생각을 하면 context의 소중함을 써보지 않아도 알 수 있을것만 같다.
블로그를 작성하기 위해 여기저기 둘러봤을때 적극적으로 활용하기를 권하는 글을 심심치않게 발견할 수 있는데
향후 실무에 투입되어지게 되면 분명 자주 사용하게 될 것 같다.
사용시 context에 설정된 키값과 state로 생성된 키값의 이름을 동일하게 설정해야 한다는 점만 주의하면 무리 없이 사용 할 수 있을것 같다.
