[Redux] 개념과 React에서의 활용

Redux는 자바스크립트 애플리케이션의 상태 관리 라이브러리입니다.
특히 React와 함께 사용될 때 매우 강력한 기능을 발휘합니다.
처음 사용했을 때, 보일러플레이트 코드가 많아 이해하기 힘들어 글을 작성해보려고 합니다.

---

Redux의 핵심 개념부터 먼저 알아보겠습니다.

Store

애플리케이션의 전체 상태를 보관하는 중앙 저장소입니다.
한 애플리케이션에는 하나의 스토어만 존재합니다.
상태는 읽기 전용이며, 직접 수정할 수 없습니다.

 

Action

상태 변경을 위한 명령입니다.
반드시 type이라는 속성을 가져야 합니다.

 

Reducer

이전 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다.

 

Redux의 흐름

1. 사용자 상호작용 발생
2. 액션 객체 생성 및 디스패치
3. 리듀서가 이전 상태와 액션을 처리
4. 새로운 상태가 스토어에 저장
5. UI 업데이트

 

이제 예제를 통해 React에서 Redux를 활용하는 법을 알아보겠습니다.

Redux 설치

npm install redux react-redux

 

Store 생성

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);
export default store;

 

Provider 설정

Provider는 React 애플리케이션에서 Redux의 스토어를 전체 앱에 제공하는 컨테이너 역할을 합니다.

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

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

 

컴포넌트에서 Redux 사용

// TodoList.js
import { useSelector, useDispatch } from 'react-redux';

function TodoList() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const addTodo = (text) => {
    dispatch({
      type: 'ADD_TODO',
      payload: { text, id: Date.now() }
    });
  };

  return (
    <div>
      {/* UI 구현 */}
    </div>
  );
}

예제에서 각 훅의 역할은 다음과 같습니다.

• useSelector: Redux 스토어에서 데이터를 선택하여 가져옵니다.
• useDispatch: 변경사항을 Redux 스토어에 전달합니다.

 

사용시 주의사항

1. 상태를 직접 수정하지 말고 새로운 객체를 반환해야 합니다.
2. 리듀서는 순수 함수여야 합니다.
3. 액션 타입은 상수로 정의해야 합니다.
4. 불필요한 리렌더링을 방지해야 합니다.

---

큰 규모의 애플리케이션에서 상태 관리를 체계적으로 할 수 있게 해주는 강력한 도구라는 것을 느꼈습니다.

글을 끝까지 봐주셔서 감사합니다.
틀린 내용은 댓글로 제보 부탁드립니다.