[TIL] [React_hook] Context

리액트의 데이터 방향은 부모에서 자식으로 단방향 흐름이기 때문에 트리구조가 깊을수록 일일이 props로 하나하나 넘겨줘야하기(Prop drilling) 때문에 이런문제를 해결하기위해서 Context를 제공합니다.

Context를 사용하면 데이터를 사용하고 싶은 컴포넌트가 데이터를 호출하여 편하게 사용할 수 있습니다.

Context가 있다고해서 props가 불피요한 것은 아닙니다.
Context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있습니다.

src/context/ThemeContext.js

import { createContext } from "react";

export const ThemeContext - createContext(null);

App.js

import { ThemeContext } from './context/ThemeContext.js'

function App() {
  const [counter, setCounter] = useState(0);
  return (
    <ThemeContext.Provider value={{ counter, setCounter }}>
      <Box />
    </ThemeContext.Provider>
  )
}

export default App;

Provider로 감싸줍니다.
Provider value값에 넘겨줄 데이터 값을 담아줍니다.

Box.js

import {useContext} from 'react';
import { ThemeContext } from './context/ThemeContext.js'

const Box = () => {
	const data = useContext(ThemeContext)
    conson.log(data) // data: {counter: 0 setCouter: function}
    return(
    	<div>
      	</div>
    )
}

ThemeContext import 시켜주고 useContext hook을 import 시켜준후
useContext값을 ThemeContext를 넣어준 후 useContext값을 변수에 할당합니다.