상태관리 2

[react/공부] zustand

zustand 알아보기        zustand란? zustand는 상태를 관리하는 방법 중 하나로, useState, Context API, RTK와 같은 역할을 하는데 훠어어어얼씬 간편하다. 정말 훨씬.         사용법 01 설치하기npm install zustand  02 세팅하기먼저 useStore.js 파일을 만들어준다. (useUserStore 등 원하는 네이밍을 붙여 사용)그리고 안에 코드를 작성하는데, RTK의 initialState, reducer, action을 한꺼번에 한 함수에 써준다.import { create } from 'zustand';const useStore = create((set) => ({ count: 0, // 상태 초기값 increase: () => s..

WEB/react 2025.02.20

[react/실습] 포켓몬 도감 사이트

'포켓몬 도감 사이트 만들기'로 상태 관리 연습하기GitHub 바로가기포켓몬 도감 사이트 바로가기트러블 슈팅         실습 내용 세가지 방식(props-drilling, contextAPI, RTK)으로 만든, 다양한 포켓몬을 확인할 수 있는 포켓몬 도감 사이트이다.모달을 통해 포켓몬의 자세한 정보를 확인할 수 있고, 원하는 포켓몬을 잡거나 놓아줄 수 있다.• 포켓몬을 눌러 포켓몬 상세 정보 확인• 원하는 포켓몬 '잡기' 버튼을 클릭하여 대쉬보드에 포켓몬 추가• 잡은 포켓몬을 클릭하여 포켓몬 놓아주기 헷갈렷던 세가지 방식 모두를 써볼 수 있어서 좋았고, 역시 props-drilling은 복잡하고 싫다 !         컴포넌트 구성 App├── Home├── Dex│ ├── DashBoard│..

WEB/react 2025.02.13