Context API

Context API : React에서 제공하는 전역적으로 데이터를 공유할 수 있게 해주는 기능.

useState 를 사용했을 때, 불필요하게 props - drilling 형태로 내려줘야하는 경우가 발생한다. 이는 코드 복잡성을 증가시켜 가독성이 떨어지고 유지 보수를 어렵게 한다.

Props - drilling : 해당 props를 사용하지 않는 컴포넌트라고 할지라도 중첩된 여러 계층의 컴포넌트에게 props를 전달해 주는 것을 의미.

🧸 createContext

// src folder > context folder > NameContext.js 생성
import {createContext} from "react"

export const NameContext = createContext(기본값);

✔️ createContext 를 이용해 context 를 생성.
✔️ context 가 없을 경우 출력될 기본값 설정 가능.

🧸 Context.Provider

// 최상위 파일 - App.jsx
import React, { useState } from "react";
import { NameContext } from "../context/NameContext";

function App() {
  const [state, setState] = useState('');
  
  return (
    <NameContext.Provider value={{state, setState}}>
      <Router/>
    </NameContext.Provider>
  );
}

export default App;

✔️ Provider 로 context 를 하위 컴포넌트에 전달.
✔️ context 로 전달할 변수 또는 함수를 value에 객체 형태로 넣기.

🧸 useContext ( )

// context 를 사용할 파일.
import React, { useContext } from "react";
import { NameContext } from "../context/NameContext";

function Name() {
  const {state, setState} = useContext(NameContext);
  
  return;
}

export default Name;

✔️ useContext 를 이용해 context 를 구독하면 컴포넌트 내에서 context 로 전달된 변수 또는 함수를 사용 가능.

📌 Caution.
Provider 에서 제공한 value 의 값이 달라질 경우, useContext 를 통해 context 를 구독하고 있는 모든 컴포넌트가 리렌더링된다.