리덕스란 무엇인가 ?

 내가 리덕스를 공부하는 이유

처음 리액트 공부를 할 때 리액트를 배우고 나서 리덕스를 배우는 과정이었는데 리액트를 배우고 리액트 만으로 이루어진 프로젝트를 만든 이후에 리덕스 공부를 해야지 라고 생각했었는데, 그 때는 리덕스가 무엇인지, 개발에서 어떤 역할을 하는지 전혀 모르는 상태였다.

리액트 공부를 하다보니 하위 컴포넌트에게 State를 전달하는 것이 무척이나 귀찮은 일이라고 생각했었는데 이를 해결할 만한 도구가 없나 찾아봤더니 리덕스였고 이제 리덕스를 배워보려 한다 😉

 

🔍 리덕스 소개

리덕스는 가장 사용률이 높은 상태관리 라이브러리이다.

소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로 충분하지만, 프로젝트의 규모가 커지면 상태 관리가 굉장히 번거로워질 수 있다.

리액트에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 된다. 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링 되도록 쉽게 최적화도 가능합니다 그리고 리덕스는 Vanilla JavaScript의 상태관리에도 리덕스를 이용할 수 있다.

 

🌊 리덕스의 흐름

리덕스는 Action, Action Creator, Reducer, Store, Dispatch로 이루어진 상태관리 라이브러리이다 

 

Action 

상태의 변화가 필요할 때, 액션을 발생 시킬 수 있다. 액션은 하나의 객체로 표현된다 이 액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 type의 값을 액션의 이름이라고 생각하면 된다. 그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 수 있다.

 

 

 {
    type: 'ADD_TODO',
    data: {
      id: 1,
      text: '리덕스 연습'
    }
}

 

Action Creator

액션 생성함수라 불리는 Action Creator는 액션을 만드는 함수입니다. 파라미터를 입력받아,

액션 객체 형태로 만들어준다. 

 

 

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

 

 

 

어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수도 있다. 이러한 일을 방지하기 위해 이를 함수로 만들어서 관리한다.

 

Reducer

리듀서는 변화를 일으키는 함수이다. 액션을 만들어서 발생기키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다.  

 

 

const initialState = {
  counter: 1
};

function reducer (state = initialState, action) {
  switch (action.type) {
    case  ...
    ......
  }
}

 

 

두 값을 참고하여 새로운 상태를 만들어 반환해 준다 .

 

 

Store

스토어는 컴포넌트 외부에 있는 상태 저장소다. 스토어 안에는 현재 상태들, 리듀서, 그리고 몇 가지의 내장 함수를 포함하고 있다.

 

Dispatch

 

디스패치는 액션을 발생시키는 역할을 한다. 디스패치가 액션을 발생시키면 리듀서에서 액션에 맞는 로직으로 새로운 상태를 만들어 반환해 준다.

 

🔒 리덕스의 세 가지 규칙

 

단일 스토어 사용을 권장한다

하나의 애플리케이션 안에는 하나의 스토어만 사용하도록 권장한다 여러개의 스토어를 사용하는 것이 불가능 하지는 않지만 상태 관리가 복잡해질 수 있다.

 

상태는 읽기 전용

리덕스의 상태는 읽기 전용이여야 한다. 리액트에서 state를 업데이트할 때 불변성을 지키기 위해 spread 연산자를 사용하듯 리덕스에서도 기존의 객체를 건드리지 않고 새로운 객체를 생성해 주어야 한다.

 

리덕스에서 불변성을 유지해야 하는 이유는 내부족으로 데이터가 변경되는 것을 감지하기 위해 shallow equality 를 하기 때문이다. 

 

리듀서는 순수한 함수

리듀서는 순수한 함수이어야 하므로 다음 조건을 만족한다 .

  - 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.

  - 파라미터 외의 값에는 의존하면 안 된다.

  - 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.

  - 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.

 

네트워크 요청을 하는 작업은 순수하지 못한 작업이므로 네트워크 요청과 같은 비동기 작업은 미들웨어를 통해

관리한다.

 

👌 마무리 

이 글에서 리액트의 상태관리를 도와주는 리덕스라는 라이브러리가 어떤 방식으로 작동하는지 알아보았다 

 

다음 글에서는 리덕스를 사용하기 위한 환경 설정과 실제로 리덕스를 사용하는 방법에 대하여 알아보도록 하자 !