패스트캠퍼스 챌린지 16일차 - 리액트 Context

 

Context

 

  - context를 이용하면 props drilling을 거치지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.

 

 

Context 사용법

 

1. const ThemeContext = React.createContext('light');

   - 기본값을 가진 context를 생성한다.

    (defaultValue로 light를 설정했으나 React 트리에서 가장 가까운 Provider에서 값을 지정하는 경우 해당값으로 변경된다)

 

2. <ThemeContext.Provider> </ThemeContext.Provider> 

   - 값을 전달할 하위 컴포넌트를 Provider로 감싸준다.

   - Provider를 통해 전달된 값이 하위 컴포넌트에 적용되므로 컴포넌트 트리에 각각 props로 전달할 필요가 없어진다.

 

3. ThemedButton.contextType = ThemeContext;

   - 적용할 컴포넌트에서 contextType 을 지정하여 사용한다.

 

** context를 사용하면 컴포넌트를 재사용하기가 어려워진다.

** Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 재렌더링된다.

   >> 이를 방지하기 위해 부모의 state로 끌어올린다.    <Context.Provider value={ this.state. ~~~ } > 

 

 

Context.Consumer

 

Context.Consumer 컴포넌트의 자식은 함수여야하며, 이 함수는 context의 현재값을 받고 React 노드를 반환한다.

Context.displayName

 

Context 객체는 displayName 문자열 속성을 설정할 수 있다.

React 개발자 도구는 이 문자열을 사용해서 context를 보여준다.

 

 

 

 

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.