React 상태 관리 Context API에 대해 알아보겠습니다.

Context API

• 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능
  ex. 사용자 로그인 정보, 애플리케이션 환경 설정, 테마...

Context API를 사용한 전역 상태 관리

• 일반적인 전역 상태 관리 흐름
• 최상위 컴포넌트인 App의 state에 넣어서 관리 (Props로 전달)
• G 컴포넌트는 전역 상태를 업데이트시키고, f와 j 컴포넌트는 업데이트된 상태를 렌더링한다.
• App이 지니고 있는 value 값을 F 컴포넌트와 J 컴포넌트에 전달하려면 여러 컴포넌트를 거쳐야 함
• F의 경우 App -> A -> B-> F, J의 경우 App -> H-> J의 흐름
  그리고 G 컴포넌트에 상태 업데이 함수를 전달할 때도 App -> A -> B-> E -> G 와 같이 복잡…
  ❖ 코드로 구현

	const [value, setValue] = useState('ppby');
    	const onSetValue = useCallback(value => setValue(value),[])

• Context API를 사용하면 Context 를 만들어 단 한번에 원하는 값을 받아와서 사용
  

Context 만들기

• (소문자로 네이밍)

Consumer 사용하기

• ex. 색상을 props 로 받는 게 아니라 ColorContext 안에 들어 있는 Consumer 라는 컴포넌트를 통해 색상을 조회 (ColorContex 는 createContext를 통해 만든다.)
  
• (Consumer 사이에 종괄호를 열어서 그 안에 함수를 넣어 줌) 이러한 패턴을 Function as a child, 혹은 Render Props 라고 한다.

Provider

• Provider 를 사용하면 Context 의 value 를 변경할 수 있다.
• 무조건 value 를 명시해 줘야 함

동적 Context 사용하기

Context 파일 수정하기

• Context 의 value 에는 무조건 상태 값만 있어야 하는 것은 아님
  -> 함수도 전달 가능
• 상태는 state 업데이트 함수는 actions 로 묶어서 Provider 의 value 에 전달
  (state 와 actions 객체를 분리해 두면 다른 컴포넌트에서 Context 값을 사용할 때 편함)
• cteateContext 의 기본 값은 실제 Provider 의 value 에 넣는 객체의 형태와 일치시켜 주는 것이 좋다.
• Context 내부 값 파악하기 쉽고, 실수로 Provider 를 사용하지 않았을 때 기본 값이 들어가 오류가 발생하지 않는다.

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

useContext Hook 사용

• 만약 children 에 함수를 전달하는 Render Props 패턴이 불편하다면, useContext Hook 사용 추천
• 클래스형 컴포넌트에선 사용 불가

static contextType 사용하기

• 클래스형 컴포넌트에서 Context를 좀 더 쉽게 사용하고 싶을 때
  -> static contextType을 정의하는 방법잉 있다.
• static contextType을 정의하면 클래스 메서드에서도 Context 에 넣어 둔 함수를 호출할 수 있다.