리액트 리덕스(redux)란?

안녕하세요~ 리액트에서 리덕스(Redux) 상태 관리 라이브러리에 알아보도록 하겠습니다.  리덕스를 왜 사용하는지 그리고 이전에 사용하던 useReducer랑은 무슨 관련이 있는지 살펴봅시다~

📑목차
1. 리덕스(Redux)
1-1. 리액트에서 리덕스란?
1-2. 리덕스의 장점과 단점
1-3. 리덕스의 핵심 개념 Store, Action, Reducer
1-4. 리덕스 문법
1-5. useReducer와 redux 공통점 
1-6. Store
1-7. Action
1-8. Reducer
2. react-redux
2-1. react-redux란?
2-2. useSelector
2-3. useDispatch
2-4. Provider 컴포넌트

서론

리액트는 컴포넌트 기반으로 구성되어 있어 UI를 효율적으로 개발할 수 있지만, 규모가 커질수록 컴포넌트 간의 상태 관리가 복잡해집니다. 이때 전역 상태 관리를 위한 라이브러리인 리덕스(Redux)가  이번에는 리덕스가 왜 필요한지, 그리고 리액트와 함께 어떻게 사용하는지를 소개하겠습니다.

본론

1. 리덕스(Redux)

 

1-1. 리액트에서 리덕스란?

전역 상태를 효율적으로 관리하기 위한 라이브러리를 뜻합니다

 

 

1-2. 리덕스의 장점과 단점

 

장점

• 컴포넌트 코드로부터 상태 관리 코드를 분리할 수 있다.
• 미들웨어를 활용한 다양한 기능 추가
• 리액트 context 보다 효율적인 렌더링 기능

단점

• 개념이 많아 초보자에게는 진입 장벽이 있음
• 보일러플레이트 코드가 많음

 

1-3. 리덕스의 핵심 개념 Store, Action, Reducer

리덕스의 핵심 개념인 Store, Action, Reducer는 리덕스의 상태 관리 구조를 이해하는 데 가장 중요한 요소입니다. 그럼 각각 어떤 뜻을 의미하는지 알아보도록 하겠습니다.

 

1-4. 리덕스 문법

// redux는 저장소를 생성하는 내용에서 사용되는 라이브러리
// react-redux는 생성한 저장소를 관리할 때 최적화, 효과적인 훅을 제공하는 라이브러리
// 리덕스는 상태를 하나의 공간에 저장한다. store라는 객체 안에 데이터를 모두 저장한다.

// 저장소 생성 (전역 상태를 저장할 공간)
import { createStore } from 'redux';
// createStore 저장소를 생성하는 함수 ==> 리듀서 함수가 필요하여
// 매개변수로 reducer 함수 전달
const store = createStore(reducer);

const initState = {count : 0}
const INCREAMENT = "INCREAMENT";
const DECREAMENT = "DECREAMENT";

// 리듀서
const reducer = (state = initState, action) => {
    const {type, payload} = action;
    switch(type) {
        case  INCREAMENT : return {...state, count : state.count + 1}
    }
}

// const reuslt = reducer(state, {type : INCREAMENT})
// this.state = result
// 디스패치
import {useDispatch, useSelector} from 'react-redux'
// useDispatch 액션으로 디스패치 즉, 스토어의 상태 업데이트
// useSelector 전역상태를 조회, 접근 상태를 주시하는 값이 변했을때 컴포넌트 리렌더링

const App = () => {
    const dispatch = useDispatch(); // 초기화된 저장소의 상태를 업데이트할 수 있는 함수를 반환
    const count = useSelector(() => state.count); // 콜백으로 전달한 함수의 반환값을 
    // useSelector 내부적으로 반환을 해서 count 변수에 할당
    // 전달한 콜백함수의 매개변수로 상태를 할당해주고, 콜백함수에서 반환한 값을 useSelector 반환을 한다.
    // count 변수에 상태값에 있는 count 할당. => 이후부터는 count를 주시하게 된다.
    return (
        <div>
            <button onClick={() => dispatch({type : INCREAMENT})}>증가</button>
        </div>
    )
}

 

1-5. useReducer VS redux 공통점

 

useReducer와 Redux는 서로 다른 환경(React 훅 vs 외부 상태 관리 라이브러리)에서 사용되지만, 상태를 업데이트하는 방식에서 매우 유사한 구조를 가지고 있습니다.

 

공통점 

• 상태 관리 - 둘 다 Reducer 패턴을 기반으로 동작합니다. 상태를 변경할 때 직접 수정하지 않고, action을 통해 reducer 함수로 전달하여 새로운 상태를 반환합니다.
• 순수 함수 사용 - reducer는 순수 함수여야 하며, 같은 입력에 같은 출력을 해야합니다.
• 액션 객체 - 둘 다 action 객체를 통해 상태 변경을 지시하며, type을 필수로 포함합니다.

1-6. Store

상태(state)가 관리되는 하나의 공간(저장소)를 뜻합니다.

 

상태를 저장하고, 상태에 접근하거나 업데이트된 상태를 구독할 수 있게 합니다.

 

1-7. Action

상태를 어떻게 바꿀 것인지를 설명하는 객체입니다.

 

일반적으로  type 속성을 가지며 필요한 경우 payload 포함합니다.

 

1-8. Reducer

현재 상태(state)와 액션(action)을 받아서 새로운 상태를 반환하는 함수입니다.

액션 내용에 따라서 상태를 어떻게 업데이트를 할지 정의합니다.

2. react-redux

2-1. react-redux란?

React와 Redux를 연결해주는 공식 라이브러리를 말합니다.

 

2-2. useSelector

useSelector 전역상태를 조회, 접근 상태를 주시하는 값이 변했을때 컴포넌트 리렌더링

const count = useSelector((state) => state.counter);

 

2-3. useDispatch

액션을 dispatch하기 위한 React 훅 즉, 스토어의 상태를 업데이트 하기 위한 훅을 말합니다.

const dispatch = useDispatch();
dispatch({ type: 'INCREMENT' });

 

2-4. Provider 컴포넌트

React 앱의 최상위 컴포넌트를 감싸서, Redux의 store를 모든 하위 컴포넌트에서 사용할 수 있도록 만듭니다.

 

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

<Provider store={store}>
  <App />
</Provider>

 

결론

리액트에서 Redux는 복잡한 상태를 예측 가능하게 관리할 수 있도록 도와주는 강력한 도구입니다. react-redux를 활용하면 React 컴포넌트에서 Redux 상태를 효율적으로 연결하고 사용할 수 있습니다. 프로젝트 규모와 상태 복잡도에 따라 Redux 도입 여부를 신중히 결정하는 것이 중요합니다.