[Redux] 🔧 리덕스는 무엇이고, 왜 사용하는가?

본 글은 아래 링크를 보고 공부하기 위해 정리한 것입니다.

Redux (3) 리덕스를 리액트와 함께 사용하기

ant design UI를 통해 노트 앱을 만드는 중 state를 전달받은 하위 컴포넌트, 그 하위 컴포넌트의 하위 컴포넌트에서 발생한 이벤트에 의해 다른 컴포넌트의 하위 컴포넌트에 상태 값 변화해야 한다면 실제로 해당 props를 사용하지 않은 컴포넌트를 거쳐가야 한다는 것이고 이 때문에 리 랜더링 하는 과정에서 매우 비효율적이라는 것을 알게 되어 redux를 적용해보고 싶었다.

 

간단한 노트 앱을 만드는 데 이왕이면 컴포넌트를 최대한 분리하여 잘 정리된 코드와 파일 구조로 만들고 싶었다. 그러다 보니 아래 그림처럼 HeaderLayout 컴포넌트에서 발생한 이벤트에 의해 InputCard 컴포넌트의 변화가 생기게 된다면, props 전달, 전달... 과 같은 상당히 비효율적인 작업을 해주어야 헸다. 

 

 

이를 아래와 같이 스토어를 통해 원하는 컴포넌트레 원하는 상태 값과 함수를 직접 전달해줄 수 있게 해주는 redux를 적용해보고자 한다.

 

 

---

 

Redux 전반적인 흐름

 

Redux 개념

1. 액션 (Action)

상태변화가 필요할 때 액션을 발생시킵니다. 액션은 하나의 객체로 표현되고 아래와 같습니다. 

 

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

 

2. 액션 생성함수 (Action Creator)

단순히 파라미터를 받아와 액션 객체 형태로 반환해주는 함수입니다. 

 

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

 

3. 리듀서 (Reducer)

변화를 이르키는 함수, 두 가지의 파라미터를 필요로 합니다. 전달받은 액션을 통해 새로운 상태를 만들어서 변화된 상태를 반환합니다.

 

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

 

4. 스토어 (Store)

리덕스의 스토어는 한 애플리케이션 당 한 개만 생성합니다. 스토어 안에는 현재의 앱 상태, 리듀서가 들어있고, 몇 가지 내장 함수들이 들어있습니다.

5. 디스패치 (Dispatch)

스토어의 내장함수 중 하나입니다. 디스패치는 액션을 발생시키는 것이고, dispatch함수는 액션을 파라미터로 받습니다. 액션을 발생시키면, 스토어에는 리듀서 함수를 실행시키고 해당 액션을 변화시키는 로직을 통해 새로운 상태를 반환하는 과정을 가집니다.

- 리덕스의 3가지 규칙

1. 하나의 애플리케이션 안에는 하나의 스토어를 갖는다.

2. 상태는 읽기전용이다. 

setState를 사용하여 state 변화를 주고자 할 때, state값을 직접적으로 변화를 주는 것이 아니라, 새로운 변수에 state를 담아 수정한 뒤, 다시 새로운 변수를 state에 넣어주는 방식처럼 redux도 직접적으로 상태변화를 하지 않고 새로운 상태를 생성해서 업데이트해주는 방식입니다.

3. 리듀서는 순수한 함수여야 한다.