React) 71번째 회고

---

1. Redux

Redux란 JavaScript 상태관리 라이브러리이다. Redux의 본질은 Node.js 모듈이다.

 

💡 주요 개념

1. Provider
2. connect
3. useSelector
4. useDispatch

 

📌 주요 특징

특징	설명
중앙 집중식 상태 관리	애플리케이션의 전역 상태를 하나의 스토어에서 관리
예측 가능한 상태 변화	순수 함수인 리듀서를 통해 상태 변경
성능 최적화	불필요한 리렌더링 방지
미들웨어 지원	비동기 작업 등을 위한 미들웨어 사용 가능

 

🚀 주요 API 및 사용법

1️⃣ Provider

Redux스토어를 React 애플리케이션에 제공한다.

import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      {/* 자식 컴포넌트들 */}
    </Provider>
  );
}

 

2️⃣ connect (클래스 컴포넌트용)

컴포넌트를 Redux스토어에 연결한다.

import { connect } from 'react-redux';

class MyComponent extends React.Component {
  // ...
}

const mapStateToProps = state => ({
  value: state.someValue
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

 

3️⃣ useSelector (함수형 컴포넌트용)

Redux스토어의 상태를 선택한다.

import { useSelector } from 'react-redux';

function MyComponent() {
  const value = useSelector(state => state.someValue);
  // ...
}

 

4️⃣ useDispatch (함수형 컴포넌트용)

액션을 디스패치하는 함수를 반환한다.

import { useDispatch } from 'react-redux';

function MyComponent() {
  const dispatch = useDispatch();
  
  const handleClick = () => {
    dispatch({ type: 'INCREMENT' });
  };
  // ...
}

 

💡 Redux를 사용하는 이유 : 상태

1. React에서 State는 component 안에서 관리되는 것이다.
2. 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능하다.
3. 자식 컴포넌트들 간의 데이터를 주고받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고받는다.
4. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해진다.
5. 상태를 관리하는 상위 컴포넌트에서 계속 내려받아야 한다. 👉🏻 Props drilling 이슈

 

🌊 Redux 흐름

 

1️⃣ Store (스토어)

Store(스토어)는 상태가 관리되는 오직 하나의 공간이다.

1. 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
2. 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.
   
   

2️⃣ Action (액션)

1. Action(액션)은 앱에서 스토어에 운반할 데이터를 말한다. (주문서)
2. Action(액션)은 자바스크립트 객체 형식으로 되어있다.
   
   

3️⃣ Reducer (리듀서)

1. Action(액션)을 Store(스토어)에 바로 전달하는 것이 아니다.
2. Action(액션)을 Reducer(리듀서)에 전달해야 한다.
3. Reducer(리듀서)가 주문을 보고 Store(스토어)의 상태를 업데이트하는 것이다.
4. Action(액션)을 Reducer(리듀서)에 전달하기 위해서는 dispatch() 메소드를 사용해야 한다.

 

🚀 Reducer는 두 개의 파라미터를 가진다.

1️⃣ state : 현재 상태

 

2️⃣ action : 사용자에 의해 수행되는 액션. dispath 함수를 호출할 때 넘기는 인자

1. dispath({type: 'age', age: 10})를 통해 dispath 함수를 호출하는 경우 {type: 'age', age: 10}이 action이다.
2. 어떤 형식의 타입이든 올 수 있지만, 컨벤션은 type를 같이 넘겨서 어떤 종류의 행위인지 명시해주는 것이다.

 

 

리액트 자체는 UI 라이브러리이기 때문에 액션 타입이나 상태 관리를 직접적으로 제공하지 않는다.
대신 상태 관리를 위해 Redux 같은 상태 관리 라이브러리를 사용할 때 액션 타입을 정의한다.

 

📌 Redux( 구체적으로 Reducer 함수)에서 사용하는 일반적인 액션 타입 예시
INCREMENT : 카운터 증가

DECREMENT : 카운터 감소

ADD_TODO : 할 일 추가

REMOVE_TODO : 할 일 삭제

TOGGLE_TODO : 할 일 완료 상태 토글

SET_VISIBILITY_FILTER : 할 일 필터 설정

FETCH_REQUEST : 데이터 요청 시작

FETCH_SUCCESS : 데이터 요청 성공

FETCH_FAILURE : 데이터 요청 실패

LOGIN_REQUEST : 로그인 요청

LOGIN_SUCCESS : 로그인 성공

LOGIN_FAILURE : 로그인 실패

LOGOUT : 로그아웃

UPDATE_PROFILE : 프로필 업데이트

DELETE_ITEM : 항목 삭제

 

각 프로젝트는 고유한 요구 사항에 따라 액션 타입을 정의하므로, 프로젝트마다 액션 타입이 다를 수 있다.
위의 것들은 일반적으로 많이 사용되는 액션 타입들이다.

 

🚀 Redux에서 사용되는 주요 키워드

아래 키워드들은 Redux의 핵심 개념과 React Redux의 주요 기능들을 포괄한다.

 

 

1. Store
   애플리케이션의 전체 상태를 저장하는 객체
   
   
2. Action
   상태 변화를 설명하는 객체
   
   
3. Reducer
   현재 상태와 액션을 받아 새 상태를 반환하는 순수 함수
   
   
4. Dispatch
   액션을 스토어에 전달하는 함수
   
   
5. Middleware
   액션과 리듀서 사이에서 작동하는 함수
   
   
6. Selector
   스토어의 상태에서 특정 데이터를 추출하는 함수
   
   
7. Provider
   Redux 스토어를 React 애플리케이션에 제공하는 컴포넌트
   
   
8. connect
   컴포넌트를 Redux 스토어에 연결하는 고차 함수
   
   
9. mapStateToProps
   스토어의 상태를 컴포넌트의 props에 매핑하는 함수
   
   
10. mapDispatchToProps
    액션 생성자를 컴포넌트의 props에 매핑하는 함수
    
    
11. combineReducers
    여러 리듀서를 하나로 결합하는 함수
    
    
12. createStore
    Redux 스토어를 생성하는 함수
    
    
13. applyMiddleware
    미들웨어를 스토어에 적용하는 함수
    
    
14. thunk
    비동기 액션을 처리하기 위한 미들웨어
    
    
15. useSelector
    함수형 컴포넌트에서 Redux 상태를 선택하는 hook
    
    
16. useDispatch
    함수형 컴포넌트에서 액션을 디스패치하는 hook
    
    
17. Redux Toolkit
    Redux 로직을 단순화하는 공식 도구 모음
    
    
18. createSlice
    리듀서와 액션 생성자를 한 번에 생성하는 함수
    
    
19. configureStore
    스토어 설정을 간소화하는 함수
    
    
20. Immutability
    Redux에서 강조되는 상태 불변성 개념

 

[React] useReducer

- 출처 : gofo-coding

[리액트] Redux와 사용법

- 출처 : medium.com

[React/Redux] Redux 사용법 (1) -State/Action/Reducer/Store

- 참고 : chuun92