[Redux] 리덕스 소개, 리덕스 기초, 왜 써야하는가?

https://ko.redux.js.org/

 

리덕스란?

자바스크립트 어플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구

 

 

 

리액트 상태 관리란?

부모 컴포넌트(stateful)에서 상태를 전달받는 자식 컴포넌트(stateless)의 모습

• 리액트의 데이터 흐름은 단방향
• 자식은 부모의 상태를 props로 전달받음
• 부모의 상태값이 변하면, 자식은 변화된 상태에 맞게 data 혹은 UI를 변경 == 리렌더링
  • -> 부모도 리렌더링, 자식도 리렌더링
• 즉, 우리는 상태 관리에 있어서 상태 구성요소를 최소화하기 위해 노력해야 함.

 

 

TIP!- 리랜더링 상황

1. 자신의 state값 변경

2. 부모 컴포넌트의 리렌더링

3. 자신이 전달받은 props값 변경

4. 강제 업데이트(forceUpdate) 실행될 때

 

 

 

 

리덕스 왜 써야하나?

리액트로 만든 SPA는 data 혹은 UI의 변화가 복잡, 다양해지는 경우가 많음 -> 어떻게 효율적으로 관리?

리덕스를 이용하여 복잡한 상태관리를 효율적으로 ~

 

예시) 아래와 같은 레이아웃을 다이어그램 형태로 바꿈

레이아웃

⬇

 

다이어그램

 

부모 컴포넌트의 state를 받을 자식 컴포넌트들의 깊이가 1층밖에 되지 않아, 충분히 쉽게 상태를 전달하고 관리 가능

 

하

지

만

 

아래와 같이 자신 컴포넌트의 깊이가 깊어진다면?

아래는 레이아웃 -> 다이어그램 형태로 변환한 그림이다.

 

레이아웃

⬇

다이어그램

 

1) 상황1 - 부모 컴포넌트에서 최하위 자식 컴포넌트까지 상태를 전달해주어야하는 경우

부모-자식-자식-최하위 자식 경로를 통해 상태 전달

부모-자식-자식-최하위 자식 경로를 통해 상태 전달

단점 : 부모~최하위 자식 사이에 있는 자식 컴포넌트들과는 무관한 상태변화이더라도, 무조건 거쳐가야함

부모-자식 관계 컴포넌트의 깊이가 더 깊어진다면 상태관리 굉장히 까다로워짐

 

 

2) 상황2 - 자식 컴포넌트에서 발생한 이벤트에 의해 다른 루트에 있는 컴포넌트의 상태변화를 불러일으켜야하는 상태에 대한 관리도 까다롭다.

 

 

 

리덕스는 이런 상황을 어떻게 해결?

다시 말하지만, 리덕스는 상태관리를 효율적으로 할 수 있도록 도와주는 도구

 

리덕스의 효율적인 상태관리

 

위와 같이 스토어를 사용하여, 상태를 컴포넌트 구조 바깥에 두고, 스토어라는 중간자를 통해 상태를 업데이트하거나, 새로운 상태를 전달받는다!

 

즉, 리덕스를 사용시, 위와 같이 상태값을 컴포넌트에 종속시키지 않고, 상태관리는 바깥에서 할 수 있다!

 

 

 

 

 

그렇다면, 스토어의 상태변화의 필요를 어떻게 캐치하고, 어떻게 새로운 상태를 전달하는가?

리덕스의 전반적 흐름

리덕스의 전반적인 흐름

리덕스 개념

✔ Action

상태 변화가 필요할 때, 액션을 발생시킴

• 하나의 객체로 표현됨
• 예를 들어, 할일 목록 추가, 삭제에 대한 액션의 타입 정의가 있어야함
• 액션은 type이라는 필드를 필수적으로 가지고 있어야함
• 추가적으로 필요한 객체 요소들은 필요에 의해 추가됨
• 아래의 data 필드와 같다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "redux"
  }
}

 

✔ Action Creator

• 액션 생성함수 : 액션을 만드는 함수
• 파라미터를 입력받아, 액션을 객체 형태로 만들어줌
• 아래의 함수는 data라는 파라미터를 입력받아, 액션을 객체 형태로 반환하는 역할

function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

 

✔ Reducers

• 변화를 일으키는 함수
• 파라미터 입력 : (이전상태, 액션)
• 반환값 : 로직에 의해 변화된 상태값 반환

function reducer(state, action) {
  ...
  return alteredState;
}

 

✔ Store

• 컴포넌트 외부에 있는 상태 저장소
• 스토어 내부에는 현재 상태들, 리듀서, 몇 가지 내장함수 포함

 

✔ Dispatch

• 스토어의 내장함수 중 하나
• 액션을 발생시키는 역할
• 디스패치가 액션을 발생시켜 스토어에게 상태 변화가 필요하다는 것을 알림
• 호출된 액션은 리듀서 함수를 호출
• 액션에 맞는 로직대로 상태를 변화시키는 과정을 거침

 

✔ 정리 - 리덕스의 흐름

• 추가, 삭제와 같은 각각의 액션타입 정의
• 액션 함수는 각각의 액션 type과 파라미터를 입력받아, 액션을 객체지향 형태로 반환
• 상태변화가 필요해질 때, 디스패치가 액션을 발생시켜 스토어에게 알림
• 스토어로 전달된 액션은 스토어의 리듀서 함수 호출
• 호출된 리듀서 함수는 (이전상태, 액션타입)을 파라미터로 전달받아,
  정의된 로직대로 현재 상태값을 변화시켜 변화된 상태를 반환
• 반환된 상태는 스토어에 저장

 

리덕스의 전반적인 흐름

 

 

이 복잡한 고정을 안정적으로 관리하려면, 규칙이 필요하다!

리덕스를 안정적으로 활용하기 위해 지켜야할 3가지 규칙

• 단일 스토어 사용 권장
  • 1 애플리케이션 - 1 스토어 사용 권장
  • 앱의 모든 state는 한 장소에 저장. 즉, state를 갱신하려고 여기저기 찾아다닐 필요 X
• 상태는 읽기전용으로
  • 상태 변경시, concat과 같은 함수를 통해 새로운 값을 이어붙여 생성한 새로운 배열로 교체하여 업데이트
  • 불변성 유지
    • 불변성이 유지된 업데이트는 리덕스의 변화감지방법인 shallow equality에 적합한 상태변화이기 때문에
      이 업데이트 방법 사용!
  • 액션을 통해서만 변경 (데이터 변경하는 유일 방법이 액션! 왜냐하면 불변성 유지하기 위해)
• Reducer는 순수한 함수
  • 순수한 함수란 ?
    • 동일한 입력을 받았을 때 언제나 동일한 출력을 내는 함수
  • 가정) 우리가 클릭을 통해 액션 발생시키면 -> 배경색 랜덤으로 바뀌는 로직 작성
    • 함수의 로직 내에서 랜덤값을 생성해야함
    • 랜덤값 생성이란 ?
      • 매번 출력이 바뀜 == 순수하지 못한 함수
  • 네트워크 요청 작업 == 순수하지 못한 로직
  • 리듀서를 이용해서만 마지막 state값 지정 (state는 결코 직접 수정, 변형 X)

 

마무리

리덕스 뿐만 아니라 React Context API, MobX 등 상태 관리를 도와주는 도구들이 몇가지 더 있지만,

리액트의 단짝처럼 리덕스는 가장 많이 사용하는 상태관리 도구.

리액트를 사용한다면 꼭 익혀야 할 도구!!

 

 

 

 

 

 

참고사이트

velog.io/@youthfulhps/What-is-Redux-and-why-use-it

리덕스는 무엇이고, 왜 사용하는가?