왜 이 후크 ?

반응 애플리케이션(복잡함), 데이터는 하향식 접근 방식(부모에서 자식으로 구성 요소)으로 전달되므로 소품을 수동으로 전달하는 것이 더 복잡해졌습니다. (예: UI 테마, 로컬 기본 설정)에 대한 소품이 "번거롭습니다". 그래서 Facebook 엔지니어들은 우리를 구하기 위해 약간의 노력을 기울였습니다. (다른 후크 개발).

useContext() 후크란 무엇입니까?

컨텍스트는 모든 수준에서 수동으로 소품을 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달하는 방법을 제공합니다.

import React, { useContext } from 'react';

언제 사용합니까?

컨텍스트는 현재 인증된 사용자, 테마 또는 기본 언어와 같은 React 구성 요소 트리에 대해 "전역"으로 간주될 수 있는 데이터를 공유하도록 설계되었습니다.

사용 사례 중 하나: (UI 테마 만들기) 🌗

우리는 아래의 여러 단계에서 학습할 것입니다Context.

설정Children.js(하위 구성 요소에 소품 전달).

App.js 설정(컨텍스트 생성).

설정Colorify.js(자식에서 UI 테마 조정).

Children.js 설정 .

Colorify.js 파일을 만드십시오. 이 파일에는 나중에 어두운 모드와 밝은 모드 사이에서 전환하는 버튼과 일부 논리가 포함됩니다.

이제 Children.js 라는 새 구성 요소 파일을 만들고 하위 구성 요소Colorify.js의 부모 역할을 합니다.

see the below diagram to understand the flow of data.

중요한 점은... 소품이 children.js 구성 요소로 전달되고 REACT DOM 구성 요소, 즉 하위 구성 요소에 액세스된다는 것입니다.

Note: more the children, all of them can have access to the props passed to children.js.

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

export default function Children() {
  return (
    <div>
      <Colorify /> // passing children Component
    </div>
  );
}

App.js 설정(컨텍스트 생성).

하위 구성 요소 가져오기Children.js .

만들기 themes 개체.

const themes = {
  light: {
    foreground: "#000",
    background: "#fff"
  },
  dark: {
    foreground: "#fff",
    background: "#000"
  }
};

이제 컨텍스트를 생성할 시간입니다: (진실의 순간).

export const ThemeContext = React.createContext(themes);

이 코드 줄은 ThemeContext로 생성된 초기화된 컨텍스트를 내보내고 themes props(value)를 인수로 전달한다는 것을 의미합니다.

기능 구성 요소 내에서 <ThemeContext.Provider>가 있는 래퍼 구성 요소value prop를 전달하여 테마 객체를 값 소품으로 전달합니다.

래퍼 구성 요소 내부에서 소품이 통과해야 하는 children 구성 요소를 전달합니다.

이 완전한 코드 조각은 다음을 의미합니다. 객체themes를 기본값으로 prop에 전달하고 있으며 이는 React DOM Hierarchy의 하위 구성 요소에 전달됩니다.

export default function App() {
  return (
    <ThemeContext.Provider value={themes}> // wrapper Component
      <Children />  // children Component (Props will be passed and accessed to it.)
    </ThemeContext.Provider>
  );
}

App.js의 전체 코드는 다음과 같습니다.

// Complete app.js code

import "./styles.css";
import React from "react";
import Children from "./Children";

const themes = {
  light: {
    foreground: "#000",
    background: "#fff"
  },
  dark: {
    foreground: "#fff",
    background: "#000"
  }
};

export const ThemeContext = React.createContext(themes);

export default function App() {
  return (
    <ThemeContext.Provider value={themes}> // wrapper Component
      <Children />  // children Component (Props will be passed and accessed to it.)
    </ThemeContext.Provider>
  );
}

Colorify.js 구성 요소 설정(최종 논리)

UI 테마를 dark에서 light 및 forth로 변경하기 위한 최종 논리입니다.

useContext 및 useState를 가져와서 시작합니다.

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

Context에서 생성된 app.js를 가져오는 중

import { ThemeContext } from "./App";

다크 모드용 로직 작성:

export default function Colorify() {
  const theme = useContext(ThemeContext);
  const [state, setState] = useState(theme.light);
  const darkMode = () => {
    setState(theme.dark);
  };
  const lightMode = () => {
    setState(theme.light);
  };
  return (
    <>
      <div
        style={{
          backgroundColor: state.background,
          color: state.foreground,
          height: 100,
          width: 200,
          margin: 100,
          border: `1px solid ${state.foreground}`
        }}
      ></div>
      <button onClick={darkMode}>Dark Mode!</button>
      <button onClick={lightMode}>Light Mode!</button>
    </>
  );
}

다크 모드 기능:

 const darkMode = () => {
    setState(theme.dark);
  };

조명 모드 기능:

 const lightMode = () => {
    setState(theme.light);
  };

theme.dark에서 theme.light로 상태를 변경하고 있습니다.
구성 요소의 배경색을 텍스트 색상은 state.foreground로, 배경색은 state.background로 설정합니다.

Colorify.js의 전체 코드는 다음과 같습니다.

// Complete Code for Colorify.js

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

export default function Colorify() {
  const theme = useContext(ThemeContext);
  const [state, setState] = useState(theme.light);
  const darkMode = () => {
    setState(theme.dark);
  };
  const lightMode = () => {
    setState(theme.light);
  };
  return (
    <>
      <div
        style={{
          backgroundColor: state.background,
          color: state.foreground,
          height: 100,
          width: 200,
          margin: 100,
          border: `1px solid ${state.foreground}`
        }}
      ></div>
      <button onClick={darkMode}>Dark Mode!</button>
      <button onClick={lightMode}>Light Mode!</button>
    </>
  );
}

코드샌드박스에서 미리보기를 확인하고 함께 플레이하세요.

useContext Hooks의 사용 사례를 즐기셨기를 바랍니다.
댓글을 달아주세요!
행복한 코딩!