props로 데이터를 전달하는 것은 한계가 있다.
Component의 수가 2-3개 정도라면 props로 관리하는 것에 불편함을
느끼지 못할 수도 있지만, 만약 Component의 수가 10-20개라면?
props로 데이터를 관리하기가 굉장히 힘들어질거다.
무한의 props, 이것을 props drilling이라고 말하는데,
props drilling을 막고자 생긴 react 라이브러리들이 있다.
가장 대표적인 것이 rudex, mobx, 그리고 오늘 배운 context API다.
Context API
React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는
데이터를 공유할 수 있도록 고안된 방법
모든 하위 컴포넌트들이 props 없이도 state를
사용가능하게 만들어주는 문법이라고 보면 된다.
사용 방법(순서를 따르면 당신도 context API 사용 가능)
1단계
createContext를 import하고 변수에 할당해준다.
나의 경우에는 products라는 state를 관리해주려 한다.
2단계
state 값 공유를 원하는 컴포넌트들을 <범위></범위>로 전부 감싼다.
범위라는 것은 Proviver로, 이 Provider를 이용해 하위 컴포넌트에
원하는 데이터를 보내줄 수 있다.
위에서 만든 변수에 Provider를 작성해주고 value={state이름}을
작성해 공유할 state를 집어넣으면 된다.
3단계
Main에서 Provider로 보낸 state를 사용하고 싶다면
useContext() 라는 훅을 이용해서 사용을 원하는
context를 불러와야 한다.
useContext라는 이름에서 유추할 수 있듯이, createContext에
들어있는 state를 변수로 저장해 쓰겠다는 의미다.
이 코드상에선 StackContext라는 변수에 아까 할당했던 products
state가 들어있다.
copyContext 변수를 이용해 데이터를 이용하면 끝.
Reference
React 공식 문서
coding apple
