React로 만드는 나만의 포켓몬 도감 GO Pokedex

React로 만드는 나만의 포켓몬 도감: GO Pokedex 프로젝트 소개

안녕하세요! 오늘은 React를 사용하여 만든 웹 기반 포켓몬 도감 프로젝트, GO Pokedex를 소개합니다. 이 프로젝트는 포켓몬 정보를 쉽게 검색하고 원하는 조건에 따라 필터링할 수 있는 기능을 제공합니다.

1. 프로젝트 개요

• 프로젝트명: GO Pokedex
• 목표: React를 활용하여 포켓몬 정보를 효과적으로 검색하고 필터링할 수 있는 웹 포켓몬 도감 구현
• 핵심 기능:
  • 전체 포켓몬 목록 조회
  • 이름, 타입, 약점 정보를 기반으로 한 검색 및 필터링 기능

2. 주요 기능 살펴보기

📖 포켓몬 목록 조회 (Pokedex.js)

• 데이터 로딩: 외부 JSON 데이터 파일(pokedex.json)을 Workspace API를 통해 비동기적으로 불러와 포켓몬 목록을 표시합니다.
• 정보 표시: 각 포켓몬의 번호, 이름, 이미지, 타입, 약점 정보가 테이블 형태로 깔끔하게 제공됩니다. (PokemonRow.js, Type.js)
• 시각화: 테이블 구조를 사용하여 많은 양의 포켓몬 정보를 한눈에 보기 쉽게 구성했습니다.

// 예시: Pokedex.js에서 데이터 로딩 및 렌더링 componentDidMount() { fetch('path/to/pokedex.json') .then(response => response.json()) .then(data => this.setState({ pokemonData: data })); } render() { // ... pokemonData를 기반으로 PokemonRow 렌더링 ... }

🔍 검색 및 필터링 (Search.js)

원하는 포켓몬을 빠르게 찾을 수 있도록 다양한 검색 및 필터링 옵션을 제공합니다.

• 이름 검색: 입력창에 포켓몬 이름의 일부를 입력하면 해당 텍스트를 포함하는 포켓몬만 실시간으로 필터링됩니다. (getPokemonByName 로직)
• 타입 필터: react-select 라이브러리를 활용하여 하나 또는 여러 개의 타입을 선택하면, 선택된 모든 타입을 가진 포켓몬만 필터링됩니다. (getPokemonByType 로직)
• 약점 필터: 타입 필터와 유사하게, react-select를 통해 선택된 모든 약점을 가진 포켓몬만 필터링하여 보여줍니다. (getPokemonByWeak 로직)

3. 기술 스택

이 프로젝트를 구현하는 데 사용된 주요 기술과 라이브러리입니다.

• Frontend: React.js, JavaScript (ES6+)
• Styling: CSS, Materialize CSS (materialize-css) 프레임워크
• 상태 관리: React 컴포넌트 내부 상태 (this.state, setState)
• 데이터 Fetch: Browser Fetch API (외부 JSON 데이터 로딩)
• UI 라이브러리: react-select (다중 선택 드롭다운 UI 구현)
• 개발 환경: Create React App (react-scripts)

4. 데이터 흐름

애플리케이션의 데이터 처리 과정은 다음과 같습니다.

1. 데이터 로딩:
   • 컴포넌트가 처음 렌더링될 때 (componentDidMount 또는 useEffect), GitHub Raw URL 등 외부 경로에서 pokedex.json (포켓몬 목록)과 types.json (타입 정보) 데이터를 Fetch API를 통해 가져옵니다.
2. 상태 저장:
   • 가져온 포켓몬 및 타입 데이터를 React 컴포넌트의 state에 저장합니다.
3. UI 렌더링:
   • 저장된 state 데이터를 기반으로 전체 포켓몬 목록과 검색/필터 옵션(타입, 약점 드롭다운)을 화면에 렌더링합니다.
4. 사용자 입력:
   • 사용자가 이름 검색창에 텍스트를 입력하거나, 타입/약점 드롭다운에서 항목을 선택합니다.
5. 상태 업데이트:
   • 사용자 입력 값에 따라 state를 업데이트합니다. (예: 검색어, 선택된 타입/약점 배열)
6. UI 필터링 및 재렌더링:
   • showRow와 같은 필터링 함수가 업데이트된 state 값을 기준으로 화면에 표시할 포켓몬을 결정합니다.
   • 필터링된 결과만을 포함하는 포켓몬 목록이 화면에 다시 렌더링됩니다.

5. 화면 구성 (요약)

• 네비게이션 바 (App.js, App.css): 상단에 프로젝트 제목(“GO Pokedex”)을 표시합니다.
• 검색/필터 영역 (Search.js): 포켓몬 이름을 입력할 수 있는 텍스트 필드와 타입 및 약점을 여러 개 선택할 수 있는 드롭다운 메뉴가 있습니다.
• 포켓몬 목록 (Pokedex.js, PokemonRow.js, Type.js): 검색 및 필터링 조건에 따라 동적으로 내용이 변경되는 포켓몬 정보 테이블입니다. 각 행은 포켓몬 한 마리의 정보를 담고 있습니다.

이 프로젝트는 React의 기본적인 상태 관리와 외부 데이터 연동, 그리고 라이브러리를 활용한 UI 구현을 연습하기에 좋은 예시가 될 수 있습니다. 감사합니다!

실행 결과