Context??

일반적으로 React 에서 데이터는 위에서 아래로(부모에서 자식으로) props를 통해서 전달된다.
이 방법이 제일 간편하기도하다. 그러나 component가 많아지고, component안에 component 안에 component... 계속해서 깊이가 깊어질수록 props로 값을 넘겨주기 번거로워진다.
이럴때 쓸 수 있는게 Context API이다.

context는 React 컴포넌트 트리 안에서 전역적이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다.
(몰랐는데 리덕스도 이 Context API에서 나온 방식이라고 한다.)

Context API는 크게 전역 상태가 저장되는 context, 전역 상태를 제공하는 Provider, 그리고 전역 상태를 받아 사용하는 Consumer로 나뉘어져 있다.

사용법

우선 Context API를 사용할땐 새로운 Context를 만들어야한다.

나는 여기서 재고를 넘겨주려고 stockContext라는 것을 만들었다.
defaultValue 값은 적절한 provider를 찾지 못했을 때 쓰이는 값이다.

• provider는 정의한 context를 하위 컴포넌트에게 전달하는 역할을 한다.
• provider를 전달하는 값을 value에 담아 사용한다.
• 전달 받는 컴포넌트의 제한 수는 없다.
• provider에 하위 procider배치도 가능하며, 그 경우 하위 provider값이 우선시된다.
• provider의 value로 가진 state가 변화할 때마다, 전부 re render됩니다.

• 사용하고자 하는 Detail Component에서 임포트를한다.
• useContext라는 훅을 사용해 변수에 임포트한 것을 할당해준다.
• 그리고 사용하고자 하는 곳에 변수로 넣어주면 끝..?