유튜브 :

코드샌드박스 :

동기 부여

Context를 사용하여 React 상태를 처리하는 이유는 무엇입니까? Redux 를 사용하여 애플리케이션 스토어를 관리 하는 것과 같은 이유 입니다. 구성 요소가 서로 통신하고 리프팅 상태 가 번거롭다면 Context는 애플리케이션 상태를 처리하는 기본 방법입니다.

전제 조건

<App>Context를 사용하기 위해 로컬 상태를 사용하는 리팩토링 을 할 것입니다 .

보시다시피 카운트를 늘리거나 줄이는 2개의 버튼이 있는 카운터가 있습니다.

공급자

<Provider>prop value을 생성 하고 0으로 설정합니다 .

<Provider>에서 최상위 구성 요소로 렌더링 index.js:

공급자 가져 오기 value와 useContext의를 <App>:

리듀서 사용

감속기 함수 생성:

상태 및 디스패치 useReducer를 Provider prop에 전달합니다 value.

<App>새 컨텍스트 값으로 업데이트 :

소비자

대안 useContext은 Consumer 입니다.

먼저 Consumer컨텍스트 에서 내보냅니다 .

그리고 교체 useContext와 함께 <Consumer>:

<Consumer>prop 에 대한 콜백 함수가 필요합니다 children. 첫 번째 인수는 Provider value입니다.

수업

클래스 구성 요소의 경우 다음에서 Provider 값에 액세스할 수 있습니다 this.context.

할 것

개선을 위한 아이디어:

• 에 대한 사용자 정의 후크 를 빌드합니다 useContext(Context).
• 작업 유형을 상수로 리팩터링합니다.
• 액션 생성자를 만듭니다.
• displayName컨텍스트에서 설정 하여 React DevTools의 가시성을 향상시킵니다.

• 유튜브 영상
• 코드샌드박스 데모
• 문맥
• 리듀서 사용