Redux Toolkit 활용(4강): React 호환성

React/Redux 마스터

Redux Toolkit 활용(4강): React 호환성

atomicdev 2024. 10. 21. 17:44

728x90

React 호환성 개선

이번 포스팅에서는 React와 Redux 간의 호환성 문제를 해결하는 방법에 대해 알아보겠습니다. 특히 컴포넌트 리렌더링 문제와 상태 구독의 비효율성을 다루고, Redux Toolkit과 Context API를 사용하여 React와 자연스럽게 통합하는 방법을 소개합니다.

React와 Redux 간의 호환성 문제

React와 Redux를 함께 사용할 때 발생할 수 있는 주요 문제 중 하나는 컴포넌트 리렌더링 문제와 상태 구독의 비효율성입니다.

Redux의 전역 상태가 변경될 때 모든 관련 컴포넌트가 다시 렌더링되면서 성능 저하가 발생할 수 있습니다. 특히 상태 변경이 빈번할 경우, 불필요한 렌더링이 발생하여 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 이러한 문제는 앱의 규모가 커질수록 심각해질 수 있습니다.

Redux Toolkit의 useSelector와 useDispatch를 사용하면 이러한 문제를 해결할 수 있습니다. useSelector를 통해 필요한 상태만 구독함으로써 불필요한 리렌더링을 방지하고, useDispatch를 사용하여 액션을 디스패치할 수 있습니다. 또한, Context API와 Redux를 조합하면 로컬 상태와 전역 상태를 혼합해 사용할 수 있어 더 나은 호환성을 제공합니다.

실습: 사용자 정보 관리 앱 예제

이번 실습에서는 사용자 정보 관리 앱을 만들어 보겠습니다. 이 앱은 로그인/로그아웃 기능을 구현하고, Redux Toolkit과 Context API를 사용하여 로컬 상태와 전역 상태를 혼합해 사용합니다.

1. 사용자 정보 관리 슬라이스 생성하기

먼저, 사용자 정보를 관리할 슬라이스를 생성합니다.

// src/features/user/userSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  user: null,
};

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    login: (state, action) => {
      state.user = action.payload;
    },
    logout: (state) => {
      state.user = null;
    },
  },
});

export const { login, logout } = userSlice.actions;
export default userSlice.reducer;

위 코드에서는 createSlice를 사용하여 로그인 및 로그아웃 기능을 관리하는 리듀서를 정의했습니다. 초기 상태는 user가 null로 설정되어 있으며, 로그인 시 사용자 정보를 저장하고, 로그아웃 시 user를 null로 만듭니다.

2. Context API와 Redux 결합하기

이제 Context API를 사용하여 로컬 상태와 전역 상태를 혼합해 사용하는 방법을 알아보겠습니다. 사용자 정보를 로컬 상태로 관리하면서, 로그인 상태를 Redux를 통해 전역으로 관리합니다.

// src/context/UserContext.js
import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [localUser, setLocalUser] = useState(null);

  return (
    <UserContext.Provider value={{ localUser, setLocalUser }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  return useContext(UserContext);
}

위 코드에서는 UserContext를 생성하고, 로컬 상태로 사용자 정보를 관리합니다. UserProvider는 하위 컴포넌트에서 localUser와 setLocalUser를 사용할 수 있도록 제공합니다.

3. 사용자 정보 관리 컴포넌트 구현하기

이제 로그인/로그아웃 기능을 제공하는 컴포넌트를 구현해 보겠습니다.

// src/context/UserContext.js
import React, { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [localUser, setLocalUser] = useState(null);

  return (
    <UserContext.Provider value={{ localUser, setLocalUser }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  return useContext(UserContext);
}

UserProfile 컴포넌트에서는 useUser를 통해 로컬 상태를 관리하고, useDispatch와 useSelector를 통해 Redux 전역 상태를 관리합니다. 로그인 버튼을 클릭하면 사용자 정보를 로컬 상태와 전역 상태에 동시에 저장하고, 로그아웃 버튼을 클릭하면 이를 모두 초기화합니다.

핵심 학습 내용

Redux Toolkit의 useSelector와 useDispatch를 사용하여 필요한 상태만 구독하고 액션을 디스패치함으로써 성능을 최적화할 수 있습니다.
Context API와 Redux를 조합하여 로컬 상태와 전역 상태를 혼합해 사용할 수 있습니다.
사용자 정보 관리 앱을 통해 Context API와 Redux를 함께 사용하여 React와 자연스럽게 호환하는 방법을 실습해 보았습니다.

이러한 방법들을 통해 React와 Redux를 더욱 효과적으로 사용할 수 있으며, 컴포넌트의 리렌더링 문제를 최소화하여 성능을 향상시킬 수 있습니다.

728x90