Context

컴포넌트 트리 전체에서 값을 전역적으로 공유할 수 있게 해주는 기능

 

하위 컴포넌트 여러 곳에 props로 값을 전달해야 할 때, 매번 props를 넘기지 않고 전역변수 처럼 사용할 수 있는 방법

 

Context는 언제 쓰나?

• 로그인 사용자 정보
• 테마(다크모드/라이트모드)
• 언어 설정
• 장바구니 데이터
• 앱 설정 정보

createContext() : Context 객체를 생성

const MyContext = React.createContext(defaultValue);

-Context 객체를 구독하고 있는 컴포넌트를 렌더링할 때, 트리 상위에서 가장 가까이에 있는 상위 레벨의 Provider로 부터 현재 값을 읽음.

-상위 레벨에 매칭되는 Provider가 없을 경우 defaultValue 사용.

 

Context.Provider : 값을 설정하고 하위 컴포넌트에게 전달

<MyContext.Provider value={//값}>

-Context.Provider 하위 컴포넌트들은 해당 context의 데이터에 접근 가능

-value prop을 받아서 이 값을 하위 컴포넌트에게 전달

-context를 구독하는 컴포넌트들(consumer)에게 context의 변화를 알리는 역할 -> consumer 컴포넌트는 provider의 value prop이 변경되면 재랜더링

-하나의 Provider 컴포넌트는 여러 개의 consumer와 연결될 수 있으며 중첩되어 사용 가능

 

Context.Consumer : context의 데이터를 구독하는 컴포넌트 

<MyContext.Cousumer>
	{value => // context 값을 이용한 렌더링}
</MyContext.Cousumer>

-함수 컴포넌트에서 context 읽기에 사용

-컴포넌트의 자식이 함수이고, 이 함수는 가장 가까운 Provider의 value를 받아서 jsx를 반환, 상위 컴포넌트에 Provider가 없다면 createContext()의 기본값과 동일

-Context.Consumer를 사용할 때는 반드시 자식(children)으로 함수를 사용해야 함, 이게 바로 function as a child 패턴.

 

import React, { useState } from "react"; 

const UserContext = React.createContext("익명");
export default function Toggle() {

  return (
    <UserContext.Provider value="123">
      <UserProfile />
    </UserContext.Provider>
  );
}


function UserProfile() {
  return (
    <UserContext.Consumer>
      {(user) => <h1>안녕하세요, {user}님</h1>}
    </UserContext.Consumer>
  );
}

 

Context.Consumer 함수로 써야함

<MyContext.Consumer>
  {(value) => (
    <div>현재 값은: {value}</div>
  )}
</MyContext.Consumer>

context의 value를 인자로 받아 JSX를 반환

 

<MyContext.Consumer>
  <div>안녕하세요</div>
</MyContext.Consumer>

에러

 

값에 따라 버튼 UI가 변하는 예제

import React, { useState } from "react"; 

const ThemeContext = React.createContext("light");

export default function Toggle() {

  return (
    <ThemeContext.Provider value="dark">
      <Toolbar></Toolbar>
    </ThemeContext.Provider>
  );
}

const styles = {
  dark : {
    background: "gray",
    color: "white"
  },
  light : {
    background: "white",
    color: "black"  
  }
}

function Toolbar(props) {
  return(
    <div>
      <ThemeButton></ThemeButton>
    </div>
  );
}

function ThemeButton(props) {
  return(
    <ThemeContext.Consumer>
      {value => <button style={value === 'dark' ? styles.dark : styles.light} >버튼</button>}
    </ThemeContext.Consumer>
  );
}

 

useContext() : 해당 값을 사용하는 훅

기본 사용법

import React, { createContext, useContext } from "react";

const MyContext = createContext("기본값"); // Context 생성

export default function Toggle() {

  return (
  <MyContext.Provider value="zzz"> // 값 넘기기
    <UserProfile></UserProfile>
  </MyContext.Provider>
  );
}


function UserProfile() {
  const user = useContext(MyContext); // 값 받아오기
  return (
    <h1>{user}</h1>
  );
}