React와 Redux 정리

1. React의 State

React에서 State는 컴포넌트에서 데이터를 관리하는 객체이다. 상태는 React 애플리케이션의 동적인 데이터를 표현하며, 변경될 때마다 컴포넌트가 다시 렌더링된다.

1.1 State의 종류

React에서 상태는 3가지 유형으로 나뉜다:

1. Local State

   • 컴포넌트 내부에서만 관리되고 사용되는 상태이다.
   • 예: 버튼 클릭 여부, 입력 필드 값 등.

2. Cross-Component State

   • 두 개 이상의 컴포넌트 간에 공유되는 상태이다.
   • props를 사용하여 부모 → 자식으로 전달하지만, 상태가 많아질수록 관리가 복잡해진다.

3. App-Wide State

   • 애플리케이션 전역에서 사용되는 상태이다.
   • 여러 컴포넌트가 데이터를 공유해야 할 때 사용된다.

   Cross-Component State와 App-Wide State 일 때 Context API 또는 Redux 같은 전역 상태 관리 도구가 필요하다.

---

2. Redux란?

Redux는 JavaScript 상태 관리 라이브러리이다. React와 함께 가장 많이 사용되며, 컴포넌트가 많아질수록 발생하는 상태 관리의 복잡성을 해결해준다.

Redux의 핵심은 모든 상태를 한 곳에서 관리하는 것이다.

2.1 Redux를 사용하는 이유

1. Props 전달 문제 해결
   • 컴포넌트 간 상태를 공유하기 위해 props를 계속 전달해야 하는 문제를 해결한다.
   • Redux를 사용하면 props 없이 중앙 저장소에서 상태를 바로 가져올 수 있다.
2. 전역 상태 관리
   • 상태를 하나의 스토어(Store)에서 관리하므로, 여러 컴포넌트가 쉽게 상태를 공유할 수 있다.

---

3. Redux의 핵심 용어

Redux를 제대로 이해하려면 4가지 용어를 알아야 한다.

3.1 Store (스토어)

• 스토어는 애플리케이션의 상태를 저장하는 공간이다.
• 모든 상태는 이곳에 저장되며, 컴포넌트가 상태를 직접 수정하지 않는다.
• 상태 변경은 리듀서(Reducer)를 통해 이루어진다. (스토어에 있는 데이터는 컴포넌트에서 직접 조작하지 않음)
• 하나의 프로젝트에 하나의 스토어만 존재한다.

3.2 Action (액션)

• 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생한다.
• Action은 컴포넌트에서 store에 운반할 데이터를 말한다.
• 상태 변경 요청을 나타내는 객체이다.
• 액션은 반드시 type 속성을 가져야 하며, 추가 데이터는 payload로 전달한다.

  const action = { type: "INCREMENT", payload: 1 };

3.3 Dispatch (디스패치)

• 액션을 발생시키는 것이다.
• dispatch(action) 과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다.

dispatch({ type: "INCREMENT", payload: 1 });

3.4 Reducer (리듀서)

• 리듀서는 액션을 처리하는 함수이다.
• 첫번째 매개 변수는 현재 상태값, 두번째 매개 변수는 Action값을 받는다.
• 항상 새로운 상태 객체를 반환하고, Http 요청, 데이터 저장 같은 건 하면 안된다.

  const reducer = (state = 0, action) => {
    switch (action.type) {
      case "INCREMENT":
        return state + action.payload;
      default:
        return state;
    }
  };

---

4. Redux 사용 방법

4.1 Redux 설치

Redux는 별도로 설치해야 한다.

npm install redux react-redux 

4.2 스토어 생성

createStore를 사용해 스토어를 생성한다.

import { createStore } from "redux";
const store = createStore(reducer);

4.3 액션 디스패치

디스패치를 통해 액션을 스토어로 전달한다.

store.dispatch({ type: "INCREMENT", payload: 1 });

---

5. React와 Redux 연결

Redux와 React를 결합하기 위해 react-redux 라이브러리를 사용한다.

설치 명령어

npm install redux react-redux @reduxjs/toolkit

@reduxjs/toolkit 는

• Redux의 복잡성을 줄이기 위해 만들어진 도구이다.
• 액션 생성, 리듀서, 미들웨어 등 Redux와 관련된 기능들을 효율적으로 구현할 수 있다.

5.1 Provider로 전역 상태 제공

Provider 컴포넌트를 사용해 애플리케이션 전체에 Redux 스토어를 제공한다.

import { Provider } from "react-redux";
<Provider store={store}>
  <App />
</Provider>;

5.2 useSelector로 상태 조회

useSelector는 Redux 스토어에서 상태를 조회하는 Hook이다.

• 인자로 함수를 넘겨줘야 한다.
• 그 함수는 state를 매개변수로 받을 수 있고, return 값은 원하는 state 변수 값 설정한다.

import { useSelector } from "react-redux";
const count = useSelector((state) => state.counter);

5.3 useDispatch로 액션 디스패치

useDispatch는 Redux 액션을 발생시키는 Hook이다.

인자로 원하는 Action 객체를 넘겨줘야 한다.

import { useDispatch } from "react-redux";
const dispatch = useDispatch();
dispatch({ type: "INCREMENT" });

---

6. Redux Toolkit

Redux Toolkit은 Redux의 복잡성을 줄이고 사용성을 개선하기 위한 도구이다.

6.1 주요 함수

1. configureStore

   • Redux 스토어를 쉽게 생성하는 함수이다.
   • 여러 미들웨어와 리듀서를 쉽게 통합할 수 있으며, Redux DevTools
     확장 프로그램과의 통합도 제공한다.

   import { configureStore } from "@reduxjs/toolkit";
   const store = configureStore({ reducer: rootReducer });

2. createSlice

   • 리듀서와 액션을 한 번에 생성하는 함수이다.
   • 슬라이스라는 개념을 사용하여 액션 타입, 액션 생성 함수, 리듀서를
     한 번에 정의한다.

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

---

7. Redux DevTools

Redux DevTools는 상태를 시각적으로 확인할 수 있는 디버깅 도구이다.

7.1 설치

먼저 크롬 확장 프로그램에서 Redux DevTools 를 설치한다.

그다음 명령어를 사용해 리액트 앱에 적용한다.

npm install --save @redux-devtools/extension

7.2 스토어 설정

import { composeWithDevTools } from "@redux-devtools/extension";
const store = configureStore({
  reducer: rootReducer,
  devTools: composeWithDevTools(),
});

7.3 사용

• 크롬에서 Redux DevTools 확장 프로그램 설치 후, 개발자 도구에서 상태를 확인할 수 있다.