개인과제 - 포켓몬도감 만들기 ③

■  context API 2가지 사용방법

(1) 사용할 컴포넌트 내에서 생성 (과제에 적용한 것)

// Dex.jsx
// PokemonContext 생성 후 export
export const PokemonContext = createContext();

⠇

// PokemonContext.Provider 로 하위 컴포넌트를 감싸서 value로 값 전달
return (
    <>
      <PokemonContext.Provider
        value={{ selectedPokemon, removePokemon, addPokemon, MOCK_DATA }}
      >
        <Dashboard />
        <PokemonList />
      </PokemonContext.Provider>
    </>
  );

 

 

(2) context 파일을 별도 생성해서 활용

// PokemonContext.js
import { createContext, useContext, useState } from "react";
import MOCK_DATA from "../mock";

// Context 생성
export const PokemonContext = createContext();

// Provider 생성
export function PokemonProvider({ children }) {
  const [selectedPokemon, setSelectedPokemon] = useState([]);
  const addPokemon = (pokemon) => {
    // logic 
  };
  const removePokemon = (pokemon) => {
    // logic
  };

  return (
    // Provider 로 값 전달 후 {children} 삽입(하위 컴포넌트들이 들어올 자리)
    <PokemonContext.Provider
      value={{ selectedPokemon, addPokemon, removePokemon, MOCK_DATA }}
    >
      {children}
    </PokemonContext.Provider>
  );
}

// Des.jsx
// 만든 Context import
import { PokemonProvider } from "./context/PokemonContext";

// PokemonContext.Provider 로 하위 컴포넌트를 감싸서 value로 값 전달
return (
    <>
    // 만든 Provider로 감싸기
      <PokemonProvider>
        <Dashboard />
        <PokemonList />
      <PokemonProvider>
    </>
  );

 

 

■  두가지의 차이점

단지 파일을 따로 생성해서  {children} 으로 한단계 더 감싸준 것 뿐 두가지 다 같은 로직이다.

파일 별도 생성 시 dex파일이 순수해진다는 점이 있으나 때에 따라 가독성이 안좋을 수도 있다.

사용하는 개발자의 스타일에 따라서 편한대로 쓰면 된다.

 

 

🧐 느낀점

개인과제 구현 중 context API 를 활용하면서 부모 컴포넌트 내에서 context 를 생성하는 방법과 외부 파일을 생성해 import 하는 방법을 알게되었다. 로직의 큰 차이는 없지만 처음 context API 를 사용했을 때 {children} 은 무슨말인지 코드들이 눈에 안들어오고 헷갈렸다.

사용방법을 여러번 연습해보고 익숙해지니 조금이나마 각 코드들의 의미를 알겠다.