[Reactjs] Context

Reactjs Context

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.

• React.createContext - Context 객체를 만듭니다.
• Context.Provider - Context 를 구독하는 컴포넌트틀에게 Context 의 변화를 알리는 역할을 합니다.
  • value - 값에 대한 제한이 없음.

import React, { useContext } from "react";

export const ColorContext = React.createContext("red");

function Something() {
  const color = useContext(ColorContext);
  return <p style={{ color }}>어떤 컴포넌트</p>;
}

export default function FunctionComponent() {
  return (
    <ColorContext.Provider value="blue">
      <p>함수로 작성한 컴포넌트에서 React Context 사용하기</p>
      <Something />
    </ColorContext.Provider>
  );
}

만약 클래스 방식으로 작성한다면…

import React from "react";

export const ColorContext = React.createContext("red");

class Something extends React.Component {
  // 정적 변수 contextType 네이밍을 임의적으로 변경할 수 없다.
  static contextType = ColorContext;
  render() {
    return <p style={{ color: this.context as string }}>어떤 컴포넌트</p>;
  }
}

export default function ClassesComponent() {
  return (
    <ColorContext.Provider value="red">
      <p>클래스로 작성한 컴포넌트에서 React Context 접근하기</p>
      <Something />
    </ColorContext.Provider>
  );
}

Context Consumer 컴포넌트를 사용한다면…

import React from "react";

export const ColorContext = React.createContext("red");

function Something() {
  return (
    <ColorContext.Consumer>
      {(value) => <p style={{ color: value }}>어떤 컴포넌트</p>}
    </ColorContext.Consumer>
  );
}

export default function ConsumerComponent() {
  return (
    <ColorContext.Provider value="blue">
      <p>Context Consumer를 이용한 React Context 사용하기</p>
      <Something />
    </ColorContext.Provider>
  );
}

Context 업데이트 하기

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

export const ColorContext = React.createContext("red");

type Props = {
  value: string;
  onChange: () => void;
};

function Something(props: Props) {
  const { onChange, value } = props;

  return (
    <p style={{ color: value }} onClick={onChange}>
      어떤 컴포넌트
    </p>
  );
}

function SomethingReadOnly() {
  const color = useContext(ColorContext);

  return <p style={{ color }}>읽기만 하는 어떤 컴포넌트</p>;
}

export default function ContextUpdateComponent() {
  const value = useContext(ColorContext);

  const [color, setColor] = useState(value);

  function handleChange() {
    setColor(color === "black" ? "red" : "black");
  }

  return (
    <ColorContext.Provider value={color}>
      <p>함수로 작성한 컴포넌트에서 React Context 사용하기</p>
      <Something value={color} onChange={handleChange} />
      <SomethingReadOnly />
    </ColorContext.Provider>
  );
}

전체 코드 - https://codesandbox.io/s/reactjs-context-api-81coel

참고

• https://reactjs.org/docs/context.html