[React] 리덕스.. 왜 쓰죠? 필요성과 그 구조에 대해

리액트를 공부하다 보면 어느 순간 리덕스에 대해서 알아보아야 하는 시기가 온다.

나에게도 드디어 그 시기가 왔다!... 🧐

리덕스에 대해 깊고 좋은 글들은 이미 충분히 많으니... 아직은 초심자인 나의 관점에서 개념을 가볍게 살펴보기로~

(고로 이 글은 초심자들에게 적합)

 

 

1. Redux and Context API

리덕스는 가장 많이 사용하고 있는 상태 관리 라이브러리다.

컴포넌트의 상태 업데이트 로직을 효율적으로 관리할 수 있고, 상태를 공유하는 방법도 훨씬 편하게 전달할 수 있다.

아마 리덕스를 처음 접하는 사람들이라면 지금까지 Context API를 써왔을 것이다. (나 또한...)

React.createContext 메서드를 통해서 컨텍스트를 만들어서 제공되는 Provider를 통해서 값을 공유하는 형태로 말이다.

리액트는 기본적으로 상위 컴포넌트의 상태가 변할 경우 하위 컴포넌트도 모두 재렌더링 되기 때문에 가능한 형태다.

 

 

 

1.1. Context API의 문제

그럼 Context API를 계속 써도 되지 않나?... 🤔 싶을 수 있겠다.

개인적으로 하는 토이 프로젝트나, 작은 프로젝트의 경우에는 잘 쓰이지만-

반대로 규모가 큰 프로젝트일 경우, Context API가 이렇게 왕창 중첩되는 경우가 생길 수도 있다.

(콜백지옥이 생각나네?..)

이렇게 중첩되는 것은 물론이고, Context API는 잦은 상태 변경에 효과적이지 않기 때문에, 일부 성능이 떨어질 수도 있다.

이런 이유로 리덕스가 더 효율적으로 상태관리에 사용되기 시작!

 

 

 

2. Redux

2.1. 구조 훑어보기

https://redux.js.org/tutorials/fundamentals/part-2-concepts-data-flow

리덕스 공식 사이트에서 가져왔다.

 

위 gif의 과정을 이렇게 분해해볼 수 있겠다.

 

1. UI 컴포넌트에서 Deposit $10 버튼을 클릭

2. 이벤트 핸들러 내부의 Dispatch 함수에서 Action 객체를 store로 전달

3. Store 내부의 Reducer에서 Action 감지, Action의 type에 따른 작업 수행 후 새로운 상태로 업데이트

4. UI 컴포넌트에서 Store의 새로운 상태로 업데이트

 

 

먼저 store가 있다. store는 모든 상태를 관리하는 하나의 커다란 저장소이며 JSON 결정체 같은 녀석이다.

 

그리고 컴포넌트는 store를 구독하는 형태다.

구독한다는 것이 뭘까 싶을 수 있는데, 말 그대로 업데이트된 상태를 store로부터 받아와서 보여주기만 할 뿐,

컴포넌트가 직접적으로 컨트롤하지 않는다.

 

그럼 상태 업데이트는 어떻게?? 🤷‍♀️

실질적으로 상태를 업데이트하는 역할- 즉 이전 state에서 새로운 state를 만들어 내는 녀석은 Reducer다.

위 구조에서 보면, Dispatch를 통해 발행한 'Action'이 Reducer를 거치며 이전 상태였던 0이 새로운 상태인 10으로 업데이트된 걸 볼 수 있다.

 

 

좀 더 천천히 살펴보자.

 

 

 

2.2. Store

store는 애플리케이션의 전체적인 상태를 관리하는 하나의 저장소라고 보면 되겠다.
리덕스에서 store는 한 개여야만 한다.

store에 저장된 상태를 변경하려면 dispatch 함수를 통해 action을 전달해야 하는 방법밖에 없다.

import { createStore } from 'redux'
const store = createStore(todos, ['Use Redux']) // store를 생성한다

function addTodo(text) {
  return {
    type: 'ADD_TODO',
    text
  }
}

store.dispatch(addTodo('Read the docs'))
store.dispatch(addTodo('Read about the middleware'))

구독하고 있는 컴포넌트는 store의 상태가 업데이트될 때마다 함께 상태가 업데이트된다.

 

 

 

2.3. Action

Action은 기본적으로- 리듀서가 수행해야 할 작업인, 이런 포맷을 가지고 있는 객체다.

 {
     type: 'Action의 종류를 식별하는 문자열이나 심볼',
    payload: 'Action 실행에 필요한 추가적인 데이터',
 }

컴포넌트에서는 dispatch라는 함수를 통해 action을 리듀서로 보낼 수 있다.

아래처럼 이벤트 핸들러에 내부의 dispatch 함수를 통해서, 클릭 같은 특정 이벤트가 일어났을 때 수행될 수 있다.

 

 

 

2.4. Reducer

리듀서는 현재의 상태(current state)와 action을 인자로 갖는 함수이고, 새로운 상태(new state)를 결과로 반환한다.

if문은 type에 따른 switch문으로도 대체 가능

 

리듀서는 항상 순수 함수여야 한다는 특별한 규칙이 있다!

여기서 순수 함수라는 것은, 동일한 인자를 받았을 때 항상 동일한 결과를 반환해야 한다는 것이다.

 

그래서 리듀서는

• 기존의 상태와 action 인자를 기반으로 항상 새로운 상태만을 반환해야 한다.
• 리덕스의 상태는 항상 불변성을 유지해야 하기 때문에, 불변성 있는 업데이트를 위해 기존 상태를 바탕으로 새로운 상태를 만든다. (덮어 씌우는 느낌)
• 다른 side effects 나 비동기적인 작업을 수행해선 안된다.
  • side effects는 함수 바깥의 무언가를 바꾸는 것들인데, 함수에 입력된 파라미터를 변환하거나, 함수 바깥의 상태를 변화하거나 등등.. 의 작업들.

 

 

combineReducers 함수를 이용해서 여러 개의 리듀서를 하나로 사용할 수도 있다.

import { combineReducers } from 'redux'

import todosReducer from './features/todos/todosSlice'
import filtersReducer from './features/filters/filtersSlice'

const rootReducer = combineReducers({
  // Define a top-level state field named `todos`, handled by `todosReducer`
  todos: todosReducer,
  filters: filtersReducer
})

export default rootReducer

 

 

 

이렇게 리덕스의 기본적인 구조에 대해서 슬쩍 정리해봤는데,

리덕스 공식 페이지에도 상세한 설명이 있어서 차차 읽어봐야지 싶다.

리덕스 툴킷을 이용하면 이보다도 더 편리하게 상태 관리가 가능하다!..

 

언젠가 이 글이 추가 수정이 되길 바라며.. 😇

 

 

 

3. 참고

udemy React 완벽 가이드

Redux Fundamentals, Part 2: Concepts and Data Flow | Redux

아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해

 

 

---

🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️🤸‍♀️

방문해주셔서 감사합니다! 🙌

포스팅들은 공부 중인 내용을 글로 작성한 것이라 부족한 점이 많으니 참고 부탁드립니다. 

부족한 부분에 대한 코멘트는 언제나 환영입니다.

좋은 하루 보내세요, 감사합니다! 🙂