상태 관리 설계

오늘은 포켓몬 도감 애플리케이션에 필요한 상태를 설계해보았다.

상태 관리는 SPA 개발에서 핵심적인 부분으로, 어떤 데이터를 중앙에서 관리할지 결정하는 과정이다.

상태 관리란

상태(state)는 애플리케이션의 데이터를 의미하며, 애플리케이션의 동작과 화면 표시 방식을 결정한다. 상태 관리는 데이터의 흐름을 제어하고 컴포넌트 간에 데이터를 공유하는 방법을 설계하는 것이다.

 

포켓몬 도감 애플리케이션의 상태 설계

프로젝트의 구조를 보면, 여러 컴포넌트(Header, PokemonList, PokemonDetail)가 공유해야 하는 데이터가 있다. 이 데이터들은 App 컴포넌트에서 state로 관리하면 보다 효율적으로 관리할 수 있다.

import Header from './components/Header.js';
import PokemonList from './components/PokemonList.js';
import PokemonDetail from './components/PokemonDetail.js';
import { getPokemonList, getPokemonDetail } from './modules/api.js';

export default function App($app) {
    this.state = {
        pokemonList: [], // 포켓몬 목록 데이터
        search: '',      // 검색어
        type: '',        // 선택된 타입 필터
    };
}

각 상태의 역할

pokemonList

• API에서 가져온 포켓몬 데이터 배열
• PokemonList 컴포넌트에서 이 데이터를 사용해 포켓몬 카드를 렌더링

search

• 사용자가 입력한 검색어
• 이 값을 기준으로 pokemonList를 필터링하여 검색 결과를 표시
• Header 컴포넌트의 검색창과 연동

type

• 현재 선택된 포켓몬 타입 필터
• 이 값을 기준으로 pokemonList를 필터링하여 특정 타입의 포켓몬만 표시
• 포켓몬 카드의 타입 태그 클릭 시 업데이트

이렇게 설계한 상태는 앞으로 구현할 컴포넌트들에서 활용될 예정이다. PokemonList 컴포넌트에서는 이 상태값을 기반으로 포켓몬 목록을 표시하고, Header 컴포넌트에서는 검색 기능 구현 시 search 상태를 변경하게 된다.

 

회고

상태 관리 설계는 애플리케이션 개발의 초기 단계에서 매우 중요하다. 필요한 데이터를 미리 파악하고 어떻게 관리할지 계획함으로써, 이후 개발 과정이 더 명확해진다.

 

이후에는 이 상태를 활용하여 PokemonList 컴포넌트를 구현하고, 서버와의 통신을 위한 Node.js와 Express.js를 활용할 예정이다.

또한 Header 컴포넌트를 구현하여 검색 기능을 완성하고, 최종적으로 PokemonDetail 컴포넌트를 구현하여 포켓몬 도감을 완성할 계획이다.