[React 스터디] 4: Context

Context란?

부모의 props를 여러 자식 컴포넌트들에 전해줘야 하는 경우 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 값을 전달할 수 있습니다.

 

 

 

context 만들기

context 만들기 연습을 하면서 느낀 점은 context, provider, consumer 등의 코드 작성 방법이 매우 다양하다는 것이다. 구글링하면 나오는 여러 context 예제를 보면 어떤 사람은 state, function을 context.js에 작성하는가 하면 어떤 사람은 app.js에서 작성하기도 한다. 다양한 코딩이 가능한 만큼 본인이 가장 이해하기 쉬운 방법을 찾아야겠다.

 

import React, { createContext } from "react";

const MyContext = createContext({
  value: "Context 예제",
});

export default MyContext;

 

Context.Provider

import React from "react";
import MyContext from "./MyContext";

const MyContextProvider = ({ children }) => {
  const state = {
    value: "Context 예제",
  };

  return (
    <MyContext.Provider value={state.value}>{children}</MyContext.Provider>
  );
};

export default MyContextProvider;

 

Provider는 context를 구독하는 컴포넌트들에게 context의 변화를 알리는 역할을 합니다. Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop가 바뀔 때마다 다시 렌더링 됩니다. 자식들 컴포넌트들 가장 밖에서 <Provider>로 감싸줍니다.

 

 

Provider state 사용하기

import React from "react";
import MyContextProvider from "./context/MyContextProvider";
import MyClass from "./components/MyClass";

const App = () => {
  return (
    <MyContextProvider>
      <MyClass />
    </MyContextProvider>
  );
};

export default App;

 

 

Context.Consumer

import React from "react";
import MyContext from "../context/MyContext";

const MyClass = () => {
  return (
    <MyContext.Consumer>
      {(value) => {
        return value;
      }}
    </MyContext.Consumer>
  );
};

export default MyClass;

 

Context.Consumer의 자식은 함수여야합니다. 이 함수가 받는 value 매개변수 값은 해당 context의 Provider 중 상위 트리에서 가장 가까운 Provider의 value prop과 동일합니다.

 

 

값이 변하는 context

순서대로 ThemeContext.js, App.js, MyClass.js

 

import React, { createContext } from "react";

export const themes = {
  light: {
    color: "#000",
    background: "skyblue",
  },
  dark: {
    color: "#fff",
    background: "navy",
  },
};

export const ThemeContext = createContext({});

 

Toggle Button을 만들어보려 한다. 두 개의 theme 값을 가진 themes를 만들어준다.

 

import React, { useState, useContext } from "react";
import { ThemeContext, themes } from "./context/ThemeContext";
import MyClass from "./components/MyClass";

const App = () => {
  const [theme, setTheme] = useState(themes.light);

  const toggleTheme = () => {
    setTheme(theme === themes.dark ? themes.light : themes.dark);
  };

  return (
    <ThemeContext.Provider value={theme}>
      <MyClass changeTheme={toggleTheme} />
    </ThemeContext.Provider>
  );
};

export default App;

 

MyContext와 themes를 가져온다. hook을 이용하여 theme 상태를 관리한다. theme는 Provider로, toggleTheme는 이벤트를 발생시킬 컴포넌트로 넘겨준다.

 

import React, { useContext } from "react";
import { ThemeContext } from "../context/ThemeContext";

const MyClass = ({ changeTheme }) => {
  const value = useContext(ThemeContext);
  return (
    <button
      style={{
        color: value.color,
        backgroundColor: value.background,
      }}
      onClick={changeTheme}
    >
      Button
    </button>
  );
};

export default MyClass;

 

useContext로 value(theme)값을 가져오고, onClick 시 changeTheme를 실행시킨다.

 

-

굉장히 단순한 거지만 Provider로 funtion을 넘겨주려다 자꾸 실패해서 시간 다 갔다. (다음부턴 절대로 시도하지 말자.)

<MyContext.Provider> 를 App.js로 옮겨버렸다. 이게 더 가독성도 좋고 개발하기 수월하다. Context.Provider.js 파일은 왜 만들라고 가르치는 건지?

이제 발 뻗고 잘 수 있겠다..

 

 

ko.reactjs.org/docs/context.html

Context – React

 

velog.io/@i_thank/React-Context-API

React Context API with Hook