리액트 리덕스 개념과 기본 사용법 배우기

안녕하세요. 이번 글에서는 "리액트 리덕스"에 대해 알아보겠습니다.

리덕스는 애플리케이션의 상태를 효율적으로 관리할 수 있게 해주는 라이브러리입니다.

특히, 복잡한 상태 관리가 필요한 경우 리덕스는 매우 유용합니다. 리액트와 리덕스를 함께 사용하면 컴포넌트 간의 상태 공유가 쉬워지고, 코드의 가독성과 유지보수성이 향상됩니다.

최근에는 Jotai, Zustand 등 비교적 모던한 전역상태관리 라이브러리로 추세가 옮겨짐에 따라 상대적으로 Redux의 인기가 시들해진면이 있습니다만

Redux가 제시한 상태관리 방법의 패러다임을 알아두는것은 중요하며 또한 기존 레거시 프로젝트의 경우에는 여전히 Redux를 사용하고 있는 경우도 많기 때문에

리액트 리덕스와 리덕스는 프론트엔드 개발자라면 필히 알아두어야할 스택이기도 합니다.

이번에는 리덕스의 기본 개념부터 리액트와의 연동, 그리고 실제 사용 예제까지 다루어보겠습니다.

리덕스 설치하기

npm install redux

리덕스를 설치해준 뒤 리덕스를 리액트와 함께 사용하도록 만들어주는 라이브러리인 react-redux도 설치해주겠습니다.

npm install react-redux

최근에는 @reduxjs/toolkit과 같이 조금 더 편리하게 리덕스를 사용할수 있게해주는 라이브러리도 등장해있으니 참고하시면 좋겠습니다.

리덕스의 주요개념

리덕스의 주요 개념에는 스토어, 액션, 리듀서가 있습니다.

스토어

애플리케이션의 상태를 보관하는 곳입니다. 단 하나의 스토어가 존재하며, 이는 애플리케이션의 모든 상태를 관리합니다.

액션

상태를 변경하기 위한 지시사항입니다. 액션은 type 필드와 필요한 데이터를 포함한 객체로 구성됩니다.

리듀서

액션에 따라 상태를 실제로 변경하는 함수입니다. 리듀서는 현재 상태와 액션을 받아서 새로운 상태를 반환합니다.

이 세 가지 개념을 이해하는 것이 리덕스를 사용하는 첫걸음입니다. 각 개념은 리덕스의 핵심이므로, 이를 이해하고 활용하는 것이 중요합니다.

리덕스와 리액트 연동하기

import { applyMiddleware, combineReducers, createStore } from "redux";
 
const exampleIntialState = {
    hello:0
}
 
const exampleIncrease = () => {
    return { type:"EXAMPLE/INCREASE" }
}
 
const exampleDecrease = () => {
    return { type:"EXAMPLE/DECREASE" }
}
 
const exampleReducer = (state = exampleIntialState , action) => {
    switch(action.type){
        case "EXAMPLE/INCREASE":
            return {hello:state.hello + 1}
        case "EXAMPLE/DECREASE":
            return {hello:state.hello - 1}
        default:
            return state
    }
}
 
export const store = createStore(exampleReducer)
 
 
const Component = () => {
    const hello = useSelector(state => state.exampleReducer.hello)
    const dispatch = useDispatch()
 
    return (
        <div>
          {hello}
          <button onClick={() => {dispatch(exampleIncrease())}}>증가시키기</button>
          <button onClick={() => {dispatch(exampleDecrease())}}>감소시키기</button>
        </div>
    )
}
 

리덕스를 사용하기 위한 액션, 리듀서, 스토어를 모두 만들었습니다.

이제 이렇게 코드를 모두 작성했다면 프로바이더를 제공한뒤 컴포넌트를 사용해봅시다.

일반적인 리액트 프로젝트라면 main.jsx 혹은 App.jsx와 같은 최상위 부분에서 다음과 같이 Provider를 감싸줍니다.

main.tsx

import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import './index.css';
import { Provider } from 'react-redux';
import store from './modules/index.ts';
 
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <Provider store={store}>
    <App />
  </Provider>
);

react-redux에서 Provider를 가져온뒤 만들어둔 store를 가져와서 넣어줍니다.

이제 작업을 마쳤다면 내가 볼수있는곳에서 위에서 만든 Component 컴포넌트를 렌더링한 뒤 클릭을 수행해보세요

마치며

이번에는 동작하는 리덕스 프로젝트 예시를 가장 적은 코드로 작성해보았습니다.

우선 동작하는 코드를 통해 감을 익히신 뒤 액션, 액션 크리에이터, 스토어, 디스패치, 리듀서와 같은 개념들을 학습해나가시면 좋겠습니다.

그럼 이만 글을 마치도록 하겠습니다.

감사합니다.