[🏐 포켓몬 도감 만들기][개인] Context API 사용해서 리팩토링하기

props drilling 방식으로 구현한 코드를 Context 를 사용하여 리팩토링해 보려 한다. 

 

Context API 사용 전 구조

아래 이미지는 리팩토링 전 props drilling 방식으로 구현한 컴포넌트 구조이다. 

 

Dashboard 에서 사용하지 않는 removedPokemon 을 PokemonCard 를 위해서 props 로 전달해 주고 있다. 또한 PokemonList 에서 사용하지 않는 addPokemon 을 props 로 전달해 주고 있다. 

이 프로젝트는 간단한 구조로 되어있어서 충분히 props drilling 방식으로 필요한 정보를 전달해 줘도 괜찮겠지만 만약 컴포넌트가 몇백 개 되면 props 를 전달 전달 전달.... 해야될 것이다. 

이를 해소하기 위해 Context 를 사용해 보았다. Context 는 부모 컴포넌트가 자식 컴포넌트에게 props 를 전달해 주지 않아도 정보를 가져다 사용할 수 있다! 😮

 

Context API 사용해서 리팩토링

1. context 생성

import React, { createContext, useContext, useState } from 'react';

const PokemonContext = createContext();

export function usePokemonContext() {
  return useContext(PokemonContext);
}

export function PokemonProvider({ children }) {
  const [selectedPokemon, setSelectedPokemon] = useState([]);

  const addPokemon = (newPokemon) => {
    setSelectedPokemon((prev) => {
      return [...prev, newPokemon];
    });
  };

  const removePokemon = (pokemon) => {
    setSelectedPokemon((prev) => prev.filter((p) => p.id !== pokemon.id));
  };

  return (
    <PokemonContext.Provider value={{ selectedPokemon, addPokemon, removePokemon }}>
      {children}
    </PokemonContext.Provider>
  );
}

 

const PokemonContext = createContext();

createContext() 를 사용해서 PokemonContext 라는 이름의 컨텍스트를 생성했다. 이 컨텍스트는 프로젝트 전체에서 상태를 공유할 수 있도록 한다.

 

export function usePokemonContext() { return useContext(PokemonContext); }

useContext 훅을 사용하여 컨텍스트에 쉽게 접근할 수 있도록 커스텀 훅을 만들었다. 이 함수는 컨텍스트 값을 반환하며, 어디서든 이 훅을 호출하여 포켓몬을 추가하거나 제거하는 함수를 가져다 사용할 수 있다.

 

export function PokemonProvider({ children }) {...}

PokemonProvider 컴포넌트는 컨텍스트 공급자 역할을 한다. 이 컴포넌트 내부에는 해 useState 훅을 사용하여 정의한 상태와 addPokemon, removedPokemon 함수를 정의해놓았다. 

 

return (
    <PokemonContext.Provider value={{ selectedPokemon, addPokemon, removePokemon }}>
      {children}
    </PokemonContext.Provider>
  );
}

PokemonContext.Provider 를 사용해서 자식 컴포넌트들에게 value props 로 상태와 상태를 조작할 수 있는 함수를 전달한다. 전달된 값들은 자식 컴포넌트의 어디서든 가져다 사용할 수 있다.

 

2. 부모 컴포넌트에 컨텍스트 사용

import React from "react";
import Dashboard from "../components/Dashboard";
import PokemonList from "../components/PokemonList";
import MOCK_DATA from "../mock.js";
import { PokemonProvider } from "../context/PokemonContext.js";

const Dex = () => {
  return (
    <PokemonProvider>
        <Dashboard />
        <PokemonList pokemonList={MOCK_DATA} />
    </PokemonProvider>
  );
};


export default Dex;

컨텍스트를 만들었으면 부모 컴포넌트에 PokemonProvider 로 자식 컴포넌트를 감싸주면 하위의 모든 자식 컴포넌트에서 값을 사용할 수 있다.

 

3. 사용 예시

const PokemonCard = ({ pokemon, isSelected }) => {

  const { addPokemon, removePokemon } = usePokemonContext();

  ...

}

다음과 같이 구조분해할당으로 PokemonProvider 컴포넌트에 정의한 함수들을 사용할 수 있다.

 

아래 이미지는 리팩토링 후 구조를 표현해본 것이다.

 

필요한 정보를 props 로 자식에게 전달해 주지 않아도 자식은 context 에서 바로 가져다가 쓸 수 있다는 것을 표현해 보았다. 😅

 

PokemonDetail 에도 Context 사용하기

PokemonDetail 에 '추가' 버튼을 넣어서 해당 페이지에서 버튼을 눌렀을 때 선택된 포켓몬으로 하기 위한 작업을 추가로 진행했다.

 

아래는 Detail 페이지에 context 를 적용해 본 것이다. (오류 남..)

import React from "react";
import styled from "styled-components";
import { useNavigate, useParams } from "react-router-dom";
import { DEX_URL } from "../utils/path.js";
import MOCK_DATA from "../mock.js";
import { usePokemonContext } from "../context/PokemonContext.jsx";
import { PokemonProvider } from "../context/PokemonContext.jsx";

const PokemonDetail = () => {
  const navigate = useNavigate();
  const pokemonId = useParams().id;

  const { addPokemon } = usePokemonContext();

  const pokemon = MOCK_DATA.find((p) => {
    return p.id === Number(pokemonId);
  });

  return (
    <PokemonProvider>
      <StyledSection>
        <img src={pokemon.img_url} />
        <span>{pokemon.korean_name}</span>
        <span>{pokemon.types.join(", ")}</span>
        <p>{pokemon.description}</p>
        <button
          onClick={() => {
            console.log("상세페이지에서 포켓몬 추가");
          }}
        >
          추가하기
        </button>
        <button
          onClick={() => {
            navigate(DEX_URL);
          }}
        >
          뒤로가기
        </button>
      </StyledSection>
    </PokemonProvider>
  );
};

export default PokemonDetail;

 

Dex 에서 했던 것 처럼 PokemonProvider 로 감싸고 usePokemonContext() 로 필요한 것 꺼내서 쓰면 되겠다! 라고 생각했는데.. 오류가 뻥뻥 났다. 그 이유는.. 참 어이없는 이유인데..

디테일 페이지는 한 개의 컴포넌트로 구성되어 있다. 나는 context 를 그 PokemonDetail 컴포넌트에 return 쪽에 감쌌고, PokemonDetail 컴포넌트에서 usePokemonContext() 를 사용하고 있었다. 😂 즉, PokemonContext.Provider 로 감싸진 컴포넌트 계층 구조 내에서 호출하지 않은 것!

 

첫 번째 생각한 해결책으로 PokemonDetail 에 자식 컴포넌트를 만들어서 그 자식 컴포넌트에서 context 를 사용하도록 하면 되겠다! 라고 생각했는데, 공부해 본 결과 만약 이 방법대로 PokemonContext 를 사용한다면 .. Dex 페이지와 PokemonDetail 페이지가 서로 다른 상태를 가지게 될 수 있다고 한다. 왜냐면.. PokemonProvider 가 별도의 상태를 관리하기 때문! 

 

두 번째로 생각한 해결책은 Dex 와 PokemonDetail 를 같이 Provider 로 감싸는 것이다. 그러면 두 개를 공통으로 가지고 있는 컴포넌트를 찾아서 PokemonProvider 로 감싸면 된다!

 

App 컴포넌트를 PokemonProvider 로 감싸주면 끝 🔥

import "./App.css";
import { PokemonProvider } from "./context/PokemonContext";
import Router from "./shared/Router";

function App() {
  return (
    <PokemonProvider>
      <Router />
    </PokemonProvider>
  );
}

export default App;

 

문제가 생긴 구조

 

문제 해결 후 구조

 

 

이제 PokemonDetail 에서 PokemonContext 를 사용할 수 있게 되었고 Dex 와 PolemonDetail 두 개의 컴포넌트에서 동일한 상태를 공유하게 되므로, Dex 에서 상태가 변경되면 PokemonDetail 에도 상태가 반영되고 그 반대도 가능하게 되었다!!