React - ContextAPI 사용방법

 

2. Context API를 활용한 상태 관리 · GitBook

ContextAPI 사용방법

1. createContext() 생성
2. 자식 컴포넌트에서 Consumer를 이용해서 데이터 받기 => useContext() 훅을 사용할 수 있음.
3. 부모 컴포넌트에서 Provider를 사용하여 value값을 제어

Provider 와 Consumer 를 독립적으로 분리하기

• ContextAPI는 전역으로 사용하는 값이기 때문에 파일을 독립적으로 분리해서 작성하도록 변경
• 하위 컴포넌트에서는 훅을 이용해서 편리하게 사용가능

useContext() 훅

• 컴포넌트에서 ContextAPI를 편하게 사용가능하게 하는 훅
• 리턴은 객체이고, 첫번째는 상태 값, 두번째는 값을 저장하는 setter객체 반환
• Ex) const {state, action} = useContext(컨텍스트 API객체)

구현 순서

1. createContext 생성
2. Provider로 감싸기
3. useContext 훅으로 사용하기

다운 명령어

yarn add react-icons styled-components