프로젝트 소개

React와 TypeScript를 이용하여 구현한 포켓몬 도감 프로젝트 입니다.

컴포넌트 기반의 개발 방식과 TypeScript의 정적 타입 검사 기능을 활용하여 개발 생산성을 높혔습니다. 또한, Redux Toolkit을 이용하여 전역 상태를 효율적으로 관리하였으며, 이를 통해 상태의 변화를 간편하게 관리하는 법을 습득했습니다.

기능 구현

Light / Dark 테마

• 기능 소개 : Header의 Theme 버튼(아이콘)을 통해서 Light 또는 Dark 테마를 적용할 수 있습니다.
• 기능 구현 : Redux-Toolkit을 이용하여 테마의 전역 상태를 간결하게 관리하였습니다. 테마 프로바이더를 이용하여 반복되서 사용되는 CSS 속성 값을 변수로 선언하여 코드의 중복을 줄였습니다.

Header에 있는 Theme 버튼을 눌렀을 때 changeThemeType 함수가 실행되는데 이때 현재 state의 값이 'light'일 경우 'dark'로, 'dark'일 경우 'light'로 변경됩니다.

useSelector를 사용해서 Redux store에서 현재 테마의 상태 값을 가져온 후, theme 변수에 저장하고 해당 컴포넌트의 props로 전달하여 테마 값에 따라 CSS를 적용했습니다.

무한스크롤

• 기능 소개 : Main Page에서 페이지 스크롤이 끝까지 내려갈 때마다 새로운 데이터를 불러와서 보여주는 무한스크롤 기능 입니다.
• 기능 구현 : 스크롤이 끝까지 내려갔을 때 useInfiniteScroll hook의 onLoadMore 콜백 함수가 호출되며, 해당 함수에서는 dispatch(fetchPoketMons(poketmons.next))가 실행되어서 기존에 데이터에 새로 받아온 데이터를 출력합니다.