Store

Redux Store는 애플리케이션의 모든 상태(state)를 관리하는 공간이다. React 컴포넌트들은 이 Store를 통해 상태를 읽거나 업데이트한다.

• 상태(state): 애플리케이션에서 데이터(예: 로그인 여부, 사용자 정보 등)를 저장하는 공간.
• Store: 이 상태를 보관하는 "창고" 역할을 함.

 

Redux Store의 역할

1. 상태 저장 Redux의 상태는 Store에 저장돼, 중앙에서 한곳에서 관리된다.

2. 상태 변경 요청 관리 (Action/Reducer) 상태를 변경하려면 Store에 "요청"을 보내야 한다. 이 요청은 Action과 Reducer를 통해 처리돼.

3. 상태 구독 및 알림 컴포넌트가 Store의 상태를 "구독"해서, 상태가 변경되면 자동으로 업데이트될 수 있다.

 

Store 구조 관리

src/
  store/      # Redux 관련 파일들을 관리하는 디렉토리
    store.js  # Redux Store 정의
    slices/   # Slice들을 모아둔 폴더
      userSlice.js
      ... (다른 상태 관리 파일)

 

예제

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice'; // 상태를 관리하는 슬라이스

// Redux Store 생성
const store = configureStore({
  reducer: {
    user: userReducer, // 여러 슬라이스를 연결 가능
  },
});

export default store;

reducer : 상태 관리 함수. 어떤 상태를 어떻게 처리할지 정의.

이 store를 React에 연결

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store'; // Store 가져오기
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

 

Redux Store의 장점

1. 중앙 집중식 상태 관리 : 상태를 한곳에서 관리하니, 데이터 흐름을 추적하기 쉽다.

2. 전역 상태 공유 : 컴포넌트 간에 데이터를 쉽게 공유할 수 있다.

3. 예측 가능한 상태 업데이트 : Reducer와 Action을 통해 상태가 예측 가능하게 변경됨.

 

UseSelector 

Redux Store에서 특정 상태(state)를 가져오는 역할을 함. 즉, Redux의 상태를 React 컴포넌트에서 쉽게 접근할 수 있게 해 주는 도구.

• 역할 : 컴포넌트가 Redux Store를 직접 구독하게 만들어 상태가 업데잉트 되면 해당 컴포넌트도 자동으로 다시 렌더링 된다.
• 사용법
  • 기본 문법 
    • state : Redux Store에 저장된 state
    • 콜백 함수 : 상태에서 원하는 부분을 선택하는 함수. 보통 state.someSlice처럼 Slice 단위로 접근한다.

const value = useSelector((state) => state.someSlice.someValue);

• 예제

const store = {
  user: {
    isLoggedIn: false,
    userName: 'Kim Mi Seon',
  },
  cart: {
    items: ['apple', 'banana'],
  },
};

import { useSelector } from 'react-redux';

function UserInfo() {
  const userName = useSelector((state) => state.user.userName); // userSlice의 userName 가져오기

  return <div>User Name: {userName}</div>;
}

여러 상태를 가져오려면 객체 형태로 반환시킨다.

const { isLoggedIn, userName } = useSelector((state) => state.user);

계산된 값을 반환하는 경우, useMemo를 활용해 성능을 최적화 할 수 있다.

import { useMemo } from 'react';

const expensiveData = useMemo(() => {
  return someHeavyCalculation(state.someData);
}, [state.someData]);

 

configureStore

Redux Store를 설정할 때 자주 사용하는 옵션들을 기본값으로 설정한다. createStore를 사용할 때 보다 더 간편하고, 확장 가능하게 Store를 설정할 수 있다.