[React] React Hooks : 4. useContext

먼저 Context란?

[etc] Context란 무엇인가?

 

1. useContext 란?

사용자가 선택한 언어, 테마, 로그인등의 인증된 사용자 속성을 전달할 경우 유용한 Hook.

Context API와 함께 사용하면 앱의 모든 구성요소를 쉽게 전달할 수 있음. (전역상태관리)

 

1-1. Context API란?

 

2. useContext 사용하기

 

1) Hook을 사용할 context 만들기

 

ex) members.member1을 기본 값으로 가지는 context 개체를 React.createContext()로 생성

// dummy context
const members = {
  member1: {
    name: "Jiwoo Park",
    occupation: "Web Developer"
  },
  member2: {
    name: "Jisoo Park",
    occupation: "Student"
  }
};

// context 생성하기
export const MemberContext = React.createContext(members.member1);

 

2) Context.Provider 

- provider는 context를 하위 컴포넌트에 전달하는 역할을 함.

- provider는 꼭 value라는 변수로 전달해야 함.

- 전달받는 컴포넌트의 개수는 제한이 없음.

- provider에 하위 provider를 배치하는 등의 중첩 선언이 가능하나 하위의 provider 값이 우선된다.

<FirstContext.Consumer>
  {firstProp => (
    <SecondContext.Consumer>
      {secondProp => <MemberProfile firstprop={firstprop} secondProp={secondProp} />}
    </SecondContext.Consumer>
  )}
</FirstContext.Consumer>

- provider 하위에 context를 가진 컴포넌트는 provider의 value로 전달한 state가 변화할 때마다 다시 렌더링 된다.

 

ex) Provider를 통해 MemberContext의 context를 구독하는 MemberProfile 컴포넌트

function App() {
	return (
    		{/* 가상 상위에서 Provider로 컴포넌트를 감싼다 */}
		<MemberContext.Provider value=members.member1}>
			<MemberProfile/>
		</MemberContext.Provider>
	);
}

 

 

3) Context.Consumer

- context 변화를 구독하는 컴포넌트.

- context의 자식은 함수형 컴포넌트여야 한다. (Hook이기 때문에)

- 컴포넌트가 가지는 context 값은 가장 가까운 provider의 값이다.

- 상위에 provider가 없다면, createContext()에서 정의한 defaultValue를 가진다.

 

4) 컴포넌트 안에서 context 사용하기

 

4-1) 최상단에서 호출하기

import { useContext } from 'react';
import { MemberContext } from "./App";

 

4-2) useContext hook을 사용하여 context 가져오기

function MemberProfile() {
  const member = useContext(MemberContext);
  return (
    <div>
      <p>`이름 : ${member.name}, 직업 : ${member.occupation}`</p>
    </div>
  );
}

 

3. useContext 사용시 주의사항

 

1) Hook은 단일 인수만 허용한다.

useContext(MemberContext.name) // 사용X
useContext(MemberContext.occupation) // 사용X

useContext(MemberContext) // 사용O

 

2) 여러개의 context를 구독하고 싶다면, provider의 내부에 또 다른 provider를 정의하는 식으로 만들어야 함.

& 둘 이상의 context가 중첩될 경우 한 번에 prop을 내리는 것이 좋다고 한다.

<FirstContext.Consumer>
  {firstProp => (
    <SecondContext.Consumer>
      {secondProp => <MemberProfile firstprop={firstprop} secondProp={secondProp} />}
    </SecondContext.Consumer>
  )}
</FirstContext.Consumer>