Context

Context

1. Context

 - React 애플리케이션에서 컴포넌트 간에 데이터를 전달하는 메커니즘

 - 중간 컴포넌트를 건너뛰고, 컴포넌트 트리 내에서 데이터를 직접 전달할 수 있음

 - 즉, Context는 state를 쉽게 공유할 수 있게 함

 

2. 사용방법

 - ContextEx.js

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

// Context를 사용하여, background의 색을 지정
const ThemeContext = createContext("pink");

const ContextEx = () => {
  const theme = useContext(ThemeContext);
  const style = {
    width: "100px",
    height: "100px",
    background: theme,
  };

  return <div style={style} />;
};

export default ContextEx;

 

 - App.js

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

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

export default App;

 

 - 결과