반응 컨텍스트 이해

생각해 보면 하향식 데이터 흐름이 리액트에 초능력을 부여한 것입니다.

데이터를 더 잘 제어할 수 있습니다. 더 이상 많은 JS 파일을 샅샅이 뒤지고 무엇이 상태를 변경했는지 파악하는 초기 JS 시절이 없습니다.

무엇이 어디서 오는지 알기 때문에 디버그하기가 더 쉽습니다

.

하지만 깊게 중첩된 앱을 구축한다면 어떨까요?

const App = () => {
  return (
    <div>
      App Contents
      <Toolbar theme={store.theme} />
    </div>
  );
};

const Toolbar = ({ theme }) => {
  return (
    <div>
      <Button theme={theme} label="Button 1" />
      <Button theme={theme} label="Button 2" />
    </div>
  );
};

const Button = ({ theme, label }) => {
  return (
    <button style={{ backgroundColor: theme === "dark" ? "black" : "white" }}>
      {label}
    </button>
  );
};

이를 소품 드릴링이라고 하며 데이터 소스와 사용자 사이에 더 많은 구성 요소 계층이 있는 경우 더욱 악화됩니다. 이것을 해결하는 방법? 구출에 대한 반응 컨텍스트!!

Context API를 사용하여 소품 드릴링 해결

Context API를 사용하면 상태/데이터를 컨텍스트 공급자로 래핑하여 여러 구성 요소에 브로드캐스트할 수 있습니다. 상태를 값 속성으로 contextProvider에 전달하면 하위 구성 요소는 컨텍스트 소비자 또는 useContext 후크를 사용하여 이 공급자를 활용할 수 있습니다.

1단계: 컨텍스트 만들기

// ThemeContext.jsx
import React from "react";
const ThemeContext = React.createContext();
export default ThemeContext;

2단계: 컨텍스트 제공자:
이제 컨텍스트 제공자로 모든 컨텍스트 사용자를 래핑하고 '브로드캐스트'하려는 값을 전달할 수 있습니다.

const App = () => {
  return (
    <ThemeContext.Provider value={{ theme: store.theme }}>
      App Contents
      <Toolbar />
    </ThemeContext.Provider>
  );
};

이제 하위 항목인 Toolbar, Button에서 테마에 어떻게 액세스합니까?

3단계: 컨텍스트 소비자: useContext
컨텍스트에 액세스하기 위해 ComponentApp의 자손에서 useContext 후크를 사용합니다.

import React from "react";
import { ThemeContext } from "./ThemeContext";

const Button = ({ theme, label }) => {
  const { theme } = React.useContext(ThemeContext);
  return (
    <button style={{ backgroundColor: theme === "dark" ? "black" : "white" }}>
      {label}
    </button>
  );
};

여기에서 렌더링된 출력은 동일하게 유지되지만 아래 코드는 약간 더 간결하고 깔끔합니다.

그게 다야! 컨텍스트가 필요한 이유와 이를 구현하는 방법을 명확히 하는 데 도움이 되었기를 바랍니다. 질문, 의견 또는 제안 사항을 자유롭게 게시하십시오.