React 상태 관리(State Management) 방법과 장단점 비교

React는 컴포넌트 기반 라이브러리로, 상태(State)를 효과적으로 관리하는 것이 중요한 요소 중 하나입니다. 상태 관리는 UI의 동적인 변화를 반영하고, 데이터 흐름을 유지하는 데 필수적인 역할을 합니다. 하지만, 프로젝트의 규모와 복잡도에 따라 적절한 상태 관리 방법을 선택하는 것이 매우 중요합니다.이 글에서는 다양한 React 상태 관리 방법을 소개하고, 각 방법의 장단점을 비교해 보겠습니다.1. useState & useReducer (기본적인 상태 관리)📝 useStateuseState는 React의 기본적인 상태 관리 훅(Hook)으로, 로컬 컴포넌트 상태를 관리하는 데 적합합니다. ✔️ 장점간단하고 직관적인 API 제공불필요한 리렌더링을 최소화할 수 있음작은 규모의 상태 관리에 적합 ❌..

• format_list_bulleted 개발
• · 2025. 2. 18.
• textsms

zustand 사용하기 2

zustand 설치 및 기본 사용법yarn add zustand  상태 정의// src/zustand/bearsStore.jsimport { create } from "zustand";// Zustand 스토어 생성const useBearsStore = create((set) => ({ bears: 0, // 초기 상태 값: 곰의 수는 처음에 0으로 시작 increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), // 곰의 수를 1 증가시키는 함수 removeAllBears: () => set({ bears: 0 }), // 곰의 수를 0으로 초기화하는 함수}));export default useBearsStore; // 생성한 ..

• format_list_bulleted TIL
• · 2024. 7. 29.
• textsms

zustand 사용하기

오늘은 zustand를 처음 사용해봤다! 아직도 약간 헷갈리긴 한데 리덕스 툴킷보다 쉬운 건 맞는 듯 싶다... 먼저 상태를 만들고, 사용하면 된다. 1. 상태 만들기먼저 임포트를 해준다.import { create } from 'zustand'; 그리고 create 함수를 호출해서 새로운 상태를 생성한다.export const useUserStore = create((set) => ({ count: 0, 그리고 상태를 변경하는 함수가 필요하다면 increment: () => set((state) => ({ count: state.count + 1 })),상태 업데이트에 필요한 set을 사용해서이런식으로 만들어주고, 사용할 때는import { useStore } from './path/to/stor..

• format_list_bulleted TIL
• · 2024. 7. 11.
• textsms