책 한권으로 시작하는 react (13)

ppby·2020년 7월 15일
0

페퍼보이 TIL

목록 보기
14/20
post-thumbnail

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 라는 컴포넌트를 통해 색상을 조회 (ColorContexcreateContext를 통해 만든다.)
  • (Consumer 사이에 종괄호를 열어서 그 안에 함수를 넣어 줌) 이러한 패턴을 Function as a child, 혹은 Render Props 라고 한다.

Provider

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

동적 Context 사용하기

Context 파일 수정하기

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

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

useContext Hook 사용

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

static contextType 사용하기

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

0개의 댓글