[리액트를 다루는 기술] 15장 Context API

15장 Context API

15.1 Context API를 사용한 전역 상태 관리 흐름 이해하기

Context API를 이용하면

Context를 만들어 한번에 원하는 값을 받아와서 사용할 수 있다!

 

 

15.2 Context API 사용법 익히기

15.2.1 새 Context 만들기

새 Context를 만들 때는 createContext 함수를 사용

 

 

15.2.2 Consumer 사용하기

children 있어야 할 자리에 중괄호를 열어서 함수를 넣어준다

-> Function as a child, Render Props

 

 

15.2.3 Provider

Context의 value를 변경한다

value 값을 명시해 주지 않으면 작동하지 않는다!

 

 

15.3 동적 Context 사용하기

15.3.1 Context 파일 수정하기

value에 함수를 전달해 줄 수 있다

 

- state와 actions 객체를 분리해주면 편하다

- createContext의 기본값은

Provider의 value에 넣는 객체의 형태와 일치하는 것이 좋다

 

 

15.3.2 새로워진 Context를 프로젝트에 반영하기

객체 비구조화 할당 문법 이용하면 value 조회하는 것 생략 가능!

 

 

15.3.3 색상 선택 컴포넌트 만들기

Context의 acions에 넣어준 함수 호출

 

 

 

15.4 Consumer 대신 Hook 또는 static contextType 사용하기

15.4.1 useContext Hook 사용하기

useContext Hook 사용하면 편하게 Context 값 조회 가능하다

but, Hook은 함수 컴포넌트에서만 사용 가능하다

 

 

15.4.2 static contextType 사용하기

static contextType 사용하면 클래서 메서드에서도 Context에 넣어 둔 함수 호출 할 수 있다

but, 한 클래스에서 하나의 Context 밖에 사용하지 못한다