TypeScript + Context API

TypeScript + Context API

타입 설정!

• Context 준비

  contexts 디렉토리 내부에 생성

  상태 전용과 디스패치 전용으로 나눠 리렌더링 낭비 방지

  Provider 사용하지 않았을 때 undefined 되어야 하므로 undefined 도 가능하도록 타입 설정

• 액션을 위한 타입 선언(리듀서 작성 시)

  액션들을 위한 타입 선언

• 리듀서 작성

  액션에 대한 리듀서 생성

• Provider 생성

  상태 전용과 Dispatch 전용의 Provider 함께 사용하는 Provider 컴포넌트 생성

• 커스텀 Hooks 두 개 작성

  상태 전용과 Dispatch 전용을 각각 쉽게 불러오도록 Hooks 작성

• 전역에 Context 적용

  App 이나 index 에서 Provider 로 컴포넌트 커버

• 컴포넌트에서 Context 사용

  컴포넌트에서 만들어놓은 Hooks 사용