[React] useContext에 대해 알아보자

useContext는 무엇인가

컴포넌트 트리 전체에서 데이터를 전달하기 위해 사용하는 훅

부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하려면 props drilling 형태로 전달하였다.

만약, 컴포넌트 트리가 깊어지면 props를 일일이 전달해야되는 번거로움이 생긴다.

 

이때. useContext를 사용하면, 중간 컴포넌트를 거치지 않고 데이터가 필요한 컴포넌트에게 데이터를 직접 전달할 수 있다.

 

 

useContext는 언제 필요할까?

1️⃣ 컴포넌트 트리가 깊어질 때

예를 들어 최상위 컴포넌트에서 5단계 아래의 자식 컴포넌트로 데이터를 전달해야 한다면, props를 일일이 전달해야한다.
useContext를 사용하면 중간 컴포넌트를 건너뛰고 바로 데이터를 전달할 수 있다.

 

2️⃣ 전역 상태 관리가 필요할 때

사용자 정보, 테마 설정, 언어 설정 등 여러 컴포넌트에서 공유해야 하는 데이터를 관리할 때 유용하다.

 

useContext 사용 방법

1️⃣ context 폴더와 파일 생성하기

 

2️⃣ createContext로 context 만들기

import { createContext } from "react";

export const PokemonContext = createContext(null);

createContext를 이용해서 PokemonContext라는 context를 만들어준다.

null을 인자로 주는 이유는 기본값을 설정하기 위해서이다.

 

3️⃣ Provider 생성 후, 적용하기

💻 PokemonContext.jsx

import { createContext } from "react";

export const PokemonContext = createContext(null);

export const PokemonProvider = ({ children }) => {
  const [pokemonList, setPokemonList] = useState([]);

  const value = { pokemonList, setPokemonList };

  return (
    <PokemonContext.Provider value={value}>{children}</PokemonContext.Provider>
  );
};

PokemonContext를 적용하기 위한 Provider 컴포넌트를 제작한다.

 

💻 Dex.jsx

import React, { useEffect, useState } from "react";
import Dashboard from "../components/Dashboard";
import PokemonList from "../components/PokemonList";
import styled from "styled-components";
import { PokemonProvider } from "../context/PokemonContext";

const Dex = () => {
  return (
    <PokemonProvider> // 여기!
      <Container>
        <Dashboard pokemonList={pokemonList} setPokemonList={setPokemonList} />
        <PokemonList
          pokemonList={pokemonList}
          setPokemonList={setPokemonList}
        />
      </Container>
    </PokemonProvider>
  );
};

export default Dex;

Provider을 최상위 컴포넌트 위에 적용시킨다.

 

import React, { useEffect, useState } from "react";
import Dashboard from "../components/Dashboard";
import PokemonList from "../components/PokemonList";
import styled from "styled-components";
import { PokemonContext } from "../context/PokemonContext";

const Dex = () => {
  const [pokemonList, setPokemonList] = useState([]);
  
  return (
    <PokemonContext.Provider value={{pokemonList, setPokemonList}}> // 여기!
      <Container>
        <Dashboard pokemonList={pokemonList} setPokemonList={setPokemonList} />
        <PokemonList
          pokemonList={pokemonList}
          setPokemonList={setPokemonList}
        />
      </Container>
    </PokemonProvider>
  );
};

export default Dex;

Provider 컴포넌트를 제작하지 않고, 바로 최상위 컴포넌트에 적용하는 방법도 있다.

 

4️⃣ useContext로 context 사용하기

import { PokemonContext } from "../context/PokemonContext";

const { pokemonList, setPokemonList } = useContext(PokemonContext);

해당 데이터가 필요한 컴포넌트에서 useContext를 이용해서 불러오면 된다.

prop drilling 방식으로 일일이 전달할 필요가 없어서 편안하다.