Redux 3

Store

Redux Store는 애플리케이션의 모든 상태(state)를 관리하는 공간이다. React 컴포넌트들은 이 Store를 통해 상태를 읽거나 업데이트한다.상태(state): 애플리케이션에서 데이터(예: 로그인 여부, 사용자 정보 등)를 저장하는 공간.Store: 이 상태를 보관하는 "창고" 역할을 함. Redux Store의 역할1. 상태 저장 Redux의 상태는 Store에 저장돼, 중앙에서 한곳에서 관리된다.2. 상태 변경 요청 관리 (Action/Reducer) 상태를 변경하려면 Store에 "요청"을 보내야 한다. 이 요청은 Action과 Reducer를 통해 처리돼.3. 상태 구독 및 알림 컴포넌트가 Store의 상태를 "구독"해서, 상태가 변경되면 자동으로 업데이트될 수 있다. Store 구조..

Redux 2024.12.23

Redux 설치 및 기본 설정

설치 방법1. Redux와 Redux Toolkit 설치npm install @reduxjs/toolkit react-redux 2. Redux Store 생성프로젝트 src 디렉토리에 store 폴더를 만들고 store.js를 만든다.import { configureStore } from '@reduxjs/toolkit';// 여기에 slice 추가할 준비const store = configureStore({ reducer: { // 예: user: userReducer },});export default store; 3. Redux Slice 생성store 폴더 안에 slices 폴더를 만들고 각 상태 관리를 담당할 slice를 생성한다. 4. Store에 Slice 연결 import { c..

Redux 2024.12.23

상태 관리

상태 관리는 앱에서 데이터(상태)를 효율적으로 관리하고, 그 데이터가 변경될 때 UI를 자동으로 업데이트하도록 돕는 시스템이다. 상태 관리는 작은 앱부터 큰 프로젝트까지 꼭 필요한 개념이다. 상태의 예시에는 로그인 상태, 유저 정보, UI 상태, 페이지 이동 조건 등이 있다. 상태 관리의 필요성1. 데이터 흐름 관리 : 여러 컴포넌트가 동일한 데이터를 공유해야 할 때, 그 데이터를 한 곳에서 관리하면 편리해진다. 예를 들어, 유저가 로그인하면, 헤더, 프로필 페이지, 대시보드 등 여러 컴포넌트가 유저 정보를 공유해야 한다.2. 상태 변경에 따른 UI 업데이트 : 상태가 바뀌면, 자동으로 화면에 반영된다. 예를 들어, 장바구니에 상품 추가 시 바로 수량과 가격 표시가 갱신되어야 한다. 상태 관리 방식1. ..

Redux 2024.12.23