React 입문 - Redux 정리

 

 

node.js와 npm, yarn 그리고 React

 

Redux란?

리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. 최근 Redux Toolkit이 등장하면서 더욱 더 이 효율성은 빛을 보이고 있다.

 

보통 리액트를 사용하면서 리덕스를 많이 접하게 될 것이다. 리덕스는 리액트 뿐만 아니라 Augular, jQuery, vanilla JavaScript 등 다양한 framework와 작동될 수 있도록 설계되었다. 즉, 리덕스는 리액트만을 위한 라이브러리가 아니다!

 

상태 관리 도구는 뭘까?

 

리덕스를 상태 관리 라이브러리 중 하나라고 했는데, 그렇다면 상태라는게 뭘까? 상태(state) 란 간단하게 말하자면 컴포넌트 내부에서 사용하는 데이터 라고 할 수 있다. 프로젝트 규모가 커질수록 컴포넌트 수가 많아지게되고, 그에 따라 관리해야 하는 state도 많아진다. 그래서 개발자들은 상태 관리 라이브러리를 사용하게 되고, 그 중의 하나가 Redux인 것이다.

 

 

리덕스는 어떤 문제를 보완해줄까?

 

React에서의 데이터가 공유되는 방식에 대해 알아보자면 부모에서 자식으로만 데이터가 흐르는 단방향이다. 그렇기 때문에 자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능한데, 이를 보완해서 나온게 리덕스이다.

 

부모 A가 자식 D한테 데이터를 전달하고싶은데 위 이미지처럼 자식이 많다면 자식 B, C를 거쳐가야한다. 이러한 공유 과정은 프로젝트 규모가 커질수록 복작해지고 유지보수가 힘들어 지는데, 이를 리덕스라는 상태 관리 라이브러리가 보완해준다.

 

하나의 Store 라는 매체를 두고 A > B > C > D 가 아니라 A > store > D 식의 효율적으로 접근할 수 있게 해준다. Store 라는 전역 상태 저장소 덕분에 불필요한 컴포넌트 간의 데이터 전달이 없어지게 된다.

 

 

리덕스 언제 쓰는게 좋을까?

 

• 전역 상태가 필요하다고 느껴질 때
• 상태들이 자주 업데이트 될 때
• 상태를 업데이트 하는 로직이 복잡할 때
• 앱 크고 많은 사람들에 의해 코드가 관리될 때
• 상태가 업데이트되는 시점을 관찰할 필요가 있을 때

 

 

리덕스의 세가지 원칙

1. Single source of truth : 하나의 어플리케이션은 하나의 store만 가진다.
   동일한 데이터는 store라는 하나뿐인 데이터 공간에서 관리된다. 이렇게 하면 애플리케이션의 디버깅이 쉬워지고 서버와의 직렬화가 가능하며 클라이언트에서 데이터를 쉽게 받아 들여올 수 있다.
   
   
2. State is read-only : 상태는 읽기 전용이다.
   state를 직접 변경해서는 안되며 state의 변경은 reducer에서만 할 수 있습니다.  reducer 이외 공간에서의 state는 읽기 전용이라고 보면 된다. 이것이 바로 데이터의 단방향 흐름의 이점으로 상태를 변화시키는 의도를 정확히 표현할 수 있으며 상태 변경에 대한 추적이 용이해진다.
   
   
3. Changes are made with pure functions : 리듀서는 순수 함수여야 한다.
   변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 순수 함수는 다음과 같은 조건을 만족한다.
   
   • 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
   • 파라미터 외의 값에는 의존하면 안된다.
   • 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.
   • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.
   
   
   

 

Redux 핵심 키워드

 

▶️ 액션(Action)

{
   type: 'add_todo',
   data: {
       id: 1,
       text: '리덕스 배우기'
   }
}

상태에 변화가 필요하다면 액션을 일으켜야한다. 액션은 객체로 표현되며 type필드를 반드시 가지고 있어야 한다.

 

 

▶️ 액션 생성함수(Action Creator)

function addTodo(data) {
 return {
   type: 'add_todo',
   data,
 }
}

액션 생성함수는 액션 객체를 만들어주는 함수이다. 화살표 함수로도 표현이 가능하다.

 

 

▶️ 리듀서(reducer)

const initialState = {
 counter: 1,
}
function reducer(state = initialState, action) {
 switch (action.type) {
   case INCREMENT:
     return {
       counter: state.counter + 1,
     }
   default:
     return state
 }
}

리듀서를 한국어로 번역해보면 변화를 일으키는 것을 말한다. 리듀서는 현재 상태와 액션 객체를 받아, 필요하다면 새로운 상태를 리턴하는 함수이다. 액션 유형을 기반으로 이벤트를 처리하는 이벤트 리스너라고 생각하면 된다.

 

 

▶️ 스토어(Store)

 

스토어에는 상태가 들어있다. 하나의 프로젝트는 하나의 스토어만 가질 수 있다.

 

 

▶️ 디스패치(Dispatch)

 

스토어의 내장 함수 중 하나인 디스패치는 액션 객체를 넘겨줘서 상태를 업데이트 하는 유일한 방법이다. 이벤트 트리거라고 생각할 수 있다.

 

 

▶️ 구독(Subscribe)

const listener = () => {
 console.log('상태가 업데이트됨')
}
const unsubscribe = store.subsribe(listener)

unsubscribe() // 추후 구독을 비활성화할 때 함수를 호출

스토어의 내장 함수 중 하나인 구독은 리스너 함수를 파라미터로 넣어 호출하면 상태가 업데이트될 때마다 호출된다. 일종의 이벤트 리스너라고 볼 수 있다.

 

▶️ 셀렉터(Selector)

React-redux에서는 상태 값을 가져올 때 사용한다.

 

리덕스 상태 변화의 흐름

 

 

 

1. 클라이언트가 [Deposit $10] 을 버튼을 누른다.

2. [Click] 이벤트가 발생하게 되며, [Event Handler]에 있는 [Dispach]가 {Action: Deposit, payload:$10} 이라는 [Action(명령지)]을 담아 [Store] 안에 있는 [Reducer]에게 정보를 보낸다.

3. [Action(명령지)] 를 받은 것을 토대로 [State]에 있는 값을 꺼내어 요청한 [Action(명령)]을 수행 후 $10라는 값이 다시 [State]에 쓴다. (이 때 기존에 가지고 있던 [State]($0)는 사라지며, 동일한 이름으로 다시 새로 쓰여진다.)

4. 변경된 State 값으로 다시 UI가 보여지게 됩니다.

 

---

 

• 초기 상태
  • 먼저 root reducer 함수를 사용하여 만들어진 리덕스 스토어가 있다.
  • 스토어는 root reducer를 한번 호출하고 리턴 값을 초기 상태로 저장한다.
  • UI가 처음 렌더링될 때, UI 컴포넌트는 리덕스 스토어의 상태에 접근하여 그것을 렌더링에 활용한다. 또한 그것들은 후에 상태의 변화가 업데이트 되는 것을 구독한다.

 

• 업데이트(순서)
  • 유저가 버튼을 클릭한다.
  • 앱은 유저의 행동에 맞는 디스패치를 실행해 액션을 일으킨다.
  • 스토어는 이전 상태와 현재 액션으로 리듀서 함수를 실행하고, 그 리턴 값을 새로운 상태로 저장한다.
  • 스토어는 스토어를 구독하고 있던 UI들에게 업데이트 되었다고 알려준다.
  • 스토어의 데이터가 필요한 각각의 UI들은 필요한 상태가 업데이트 되었는지 확인한다.
  • 데이터가 변경된 각 구성요소는 새 데이터로 강제로 다시 렌더링하므로 화면에 표시되는 내용을 업데이트 할 수 있다.

 

---

 

💡 요약

• Redux는 글로벌 애플리케이션 상태를 관리하기 위한 라이브러리입니다.
  • Redux는 일반적으로 Redux와 React를 함께 통합하기 위해 React-Redux 라이브러리와 함께 사용됩니다.
  • Redux Toolkit은 Redux 로직을 작성하는 데 권장되는 방법입니다.
• Redux는 "단방향 데이터 흐름" 앱 구조를 사용합니다.
  • 상태는 특정 시점의 앱 상태를 설명하고 UI는 해당 상태를 기반으로 렌더링됩니다.
  • 앱에서 어떤 일이 발생하면:
    • UI가 작업을 전달합니다.
    • 저장소는 리듀서를 실행하고 발생한 상황에 따라 상태가 업데이트됩니다.
    • 상점은 상태가 변경되었음을 UI에 알립니다.
  • 새로운 상태에 따라 UI가 다시 렌더링됩니다.
• Redux는 여러 유형의 코드를 사용합니다.
  • 작업 은 필드가 있는 일반 개체이며 type앱에서 "무슨 일이 있었는지"를 설명합니다.
  • 감속기 는 이전 상태 + 작업을 기반으로 새로운 상태 값을 계산하는 함수입니다.
  • Redux 스토어 는 액션이 ​​발송 될 때마다 루트 리듀서를 실행합니다.

 

 

▼ 참고한 사이트

Redux Essentials, Part 1: Redux Overview and Concepts | Redux

복잡하고 어려운 Redux 적응기 - 오픈소스컨설팅 테크블로그

 

https://kyun2da.dev/

  (위 링크는 이 포스팅을 게제하고 난 뒤 보니 게시글이 사라졌다..ㅠㅠ 지우셨나...혹시 몰라서 남겨둔다!)