React와 Node.js 방명록 개발(6): 데이터 상태 관리

 

Redux Toolkit과 React Query 설정 및 데이터 상태 관리

 

내용 요약 및 학습 목표:

1. Redux Toolkit으로 전역 상태 관리 설정하기
   • Redux Toolkit의 주요 개념 소개
   • Redux 설치 및 프로젝트에 기본 설정
   • Slice 생성 및 전역 상태 관리와 액션 정의하기
2. React Query로 서버 상태 관리와 데이터 패칭 구현하기
   • React Query의 개념과 이점 설명
   • React Query 설치 및 초기 설정
   • 서버 상태와 클라이언트 상태의 차이점 이해
   • 서버와 연결해 데이터 패칭 및 캐싱 설정하기
3. Redux와 React Query를 함께 사용하기
   • Redux와 React Query를 효율적으로 결합하여 상태 관리하기
   • 상태의 종류별(클라이언트 상태와 서버 상태)로 Redux와 React Query의 역할 분담
   • 실습을 통해 데이터 로드와 관리 구조 설계하기

실습 세부 내용:

1. Redux Toolkit 설치 및 기본 설정
   • Redux Toolkit 설치:

     npm install @reduxjs/toolkit react-redux

     위 설치시 typescript와 버전 충돌 에러가 발생할 경우 아래 명령어로 설치합니다.

npm install @reduxjs/toolkit react-redux --legacy-peer-deps

1. • Redux store 생성 및 구성하기: store.js 파일을 생성하고 Redux Toolkit을 활용해 store를 설정합니다.

     import { configureStore } from '@reduxjs/toolkit';
     import counterReducer from './features/counter/counterSlice';
     
     export const store = configureStore({
       reducer: {
         counter: counterReducer,
       },
     });

      
   • 프로젝트에서 Redux Provider로 store 제공 설정
2. Redux Slice 생성 및 전역 상태 관리하기
   • 상태와 액션 정의: Redux slice를 사용해 상태와 동작을 정의합니다.
   • counterSlice.js 예제:

     import { createSlice } from '@reduxjs/toolkit';
     
     export const counterSlice = createSlice({
       name: 'counter',
       initialState: {
         value: 0,
       },
       reducers: {
         increment: (state) => {
           state.value += 1;
         },
         decrement: (state) => {
           state.value -= 1;
         },
       },
     });
     
     export const { increment, decrement } = counterSlice.actions;
     
     export default counterSlice.reducer;

3. React Query 설치 및 데이터 패칭 설정
   • React Query 설치:

     npm install react-query

      
   •  
   • typescript 버전 충돌 오류가 발생할 경우 아래 명령어를 사용하세요.

     npm install react-query --legacy-peer-deps

   • React Query Provider 추가: App.js에 QueryClientProvider를 추가해 React Query를 활성화합니다.
   • backend api 와 통신을 위해 axios 를 설치합니다.

     npm install axios
     또는
     npm install axios --legacy-peer-deps

   • 기본 데이터 패칭 예제:

     import { useQuery } from 'react-query';
     import axios from 'axios';
     
     const fetchPosts = async () => {
       const response = await axios.get('http://localhost:5000/api/posts');
       return response.data;
     };
     
     const Posts = () => {
       const { data, error, isLoading } = useQuery('posts', fetchPosts);
     
       if (isLoading) return 'Loading...';
       if (error) return 'An error occurred';
     
       return (
         <ul>
           {data.map(post => (
             <li key={post.id}>{post.title}</li>
           ))}
         </ul>
       );
     };

4. Redux와 React Query의 효율적인 결합
   • 데이터 관리의 분리 기준 이해하기: 서버 상태는 React Query로, 클라이언트 상태는 Redux로 관리하는 예제를 구성합니다.
   • 상태별 역할 분담으로 최적화된 상태 관리 구조 설계

 

 

guestbook-app/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── components/
│   │   ├── Posts.js                # React Query
│   │   └── Counter.js              # Redux 상태 관리
│   ├── features/
│   │   ├── counter/
│   │   │   └── counterSlice.js     # Redux Slice 파일
│   ├── services/
│   │   └── api.js                  # API 호출 (axios 설정 등)
│   ├── store/
│   │   └── store.js                # Redux store 설정 파일
│   ├── App.js                      # 메인 컴포넌트
│   ├── index.js                    # ReactDOM을 통해 React 앱을 렌더링
│   ├── index.css                   # 전역 스타일 및 Tailwind CSS 설정
│   └── ...
├── tailwind.config.js              # Tailwind CSS 설정 파일
├── package.json                    # npm 패키지 관리 파일
└── README.md                       # 프로젝트 설명 파일

 

결론: 이번 강의에서는 Redux Toolkit과 React Query를 활용해 전역 상태와 서버 상태를 관리하는 방법을 학습했습니다. 이 강의로 클라이언트와 서버 상태를 구분하여 효율적으로 관리할 수 있는 구조를 구축하게 됩니다.