[TIL] Redux 란?

react logo

1. Redux 란

◎ 리액트 생태계에서 가장 많이 사용하고 있는 상태 관리 라이브러리이다.

컴포넌트 상태 관리 로직을 다른 파일로 분리하여 더욱 효율적으로 관리할 수 있으며, 글로벌 상태 관리에도 좋다.

참고로 리덕스는 리액트에서 사용하기 위해 만들어진 라이브러리이긴 하지만, 무조건 리액트와 함께 사용할 필요는 없다.

일반 Javascript 환경이나 Angular 와 같은 다른 프레임워크에서도 사용되기도 한다.

 

npmtrends

위의 사진을 보면, 시간이 좀 된 그래프이지만, 리액트를 사용하는 프로젝트 중 45%가 리덕스를 사용하고 있다.

단순히 글로벌 상태 관리를 위한 것이라면 ContextAPI를 활용하는 것도 괜찮다.

2. Redux 와 Context API의 차이점. (리덕스 위주)

1. 미들웨어: 리덕스에는 미들웨어(Middleware)라는 개념이 존재한다. 리덕스의 미들웨어를 사용하면 액션 객체가 리듀서에서 처리되기 전에 우리가 원하는 작업을 수행할 수 있다. (미들웨어는 주로 비동기 작업을 처리할 때 많이 사용된다.)

2. 유용한 함수와, Hooks: 리덕스에서는 작업을 편리하게 해 줄 수 있는 여러 기능들이 존재한다. connect 함수를 사용하면 리덕스의 상태 또는 액션 생성 함수를 컴포넌트의 props로 받아올 수 있으며, useSelector, useDispatch, useStore와 같은 Hooks를 사용하면 손쉽게 상태를 조회하거나 액션을 디스패치 할 수 도 있다.

3. 기본적인 최적화가 이미 되어있다.

4. 하나의 커다란 상태: 리덕스에서는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용할 수 있다.

3. 리덕스의 키워드

◎ 리덕스를 사용하게 될 때 앞으로 접하게 될 키워드에 대해 알아보자.

3-1. 액션 (Action)

◎ 상태에 어떠한 변화가 필요하게 될 때, 액션을 발생시킨다. 어떻게 업데이트 해야할지 정의해주는 객체 형태이다.

{
 type: "REDUCX"
}

액체 객체는 type은 필수적으로 가지고 있어야하고 그 외의 값들은 선택적으로 넣어줄 수 있다.

{
 type: "ADD_TODO",
 data: {
  id: 0,
  text: "리덕스 어렵다.."
 }
}

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

◎ 단순히 파라미터를 받아와서 액션 객체를 만들어주는 함수이다.

 

export const addTodo = data => ({
 type: "ADD_TODO",
 data
});

 

액션 생성함수를 만들어서 사용하는 이유는 나중에 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이다.

보통 함수 앞에 export 키워드를 붙여서 다른 파일에서 불어와서 사용한다.

3-3. 리듀서 (Reducer)

◎ 변화를 일으키는 함수이다. 두 가지 파라미터(state, action)를 받아옴. 상태를 바꿔주는 함수이다.

function counter(state, action) {
 switch(action.type) {
  case 'INCREASE' :
    return state + 1;
   case 'DECREASE' :
    return state - 1;
  default:
    return state;
 }
}

 

현재 상태(state)와, 전달 받은 액션(action)을 참고하여 새로운 상태를 만들어서 반환한다.

action 타입을 가지고 액션 타입이 무엇이냐에 따라 다른 업데이트 작업을 실행한다.

기존에 있는 객체나 배열을 건드리지 않고 새로운 객체를 만들어서 반환해줘야 한다.

default 에는 기존의 state를 그대로 반환해줘야 한다.

여러 개의 리듀서를 만들고 이걸 합쳐서 루트 리듀서를 만들 수 있고, 그 안에 작은 리듀서는 서브 리듀서라고 부른다.

3-4. 스토어(Store)

◎ 하나의 애플리케이션당 하나의 스토어를 만들어야 한다.  현재 앱의 상태와 리듀서가 들어가 있고 몇 가지 내장 함수가 있다

3-4-1. 디스패치(dispatch)

◎ 액션을 발생시키거나 액션을 스토어한테 전달한다.

dispatch({ type: "REDUCX })

액체 객체를 만들어서 디스패치 파라미터로 넣어서 호출한다.

호출되면 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어준다.

3-4-2. 구독(subscribe)

◎ 스토어의 상태가 업데이트될 때마다 특정 함수를 호출할 수 있다.

리덕스를 사용하면 직접 사용하지는 않지만 react-redux 라이브러리에서 제공하는 connect 함수, useSelector Hooks를 사용해서 만약 스토어의 상태가 업데이트되면 컴포넌트가 리렌더링 하는 작업을 대신 처리해준다.

4. 리덕스의 규칙

1. 하나의 애플리케이션에는 하나의 스토어가 있다. 스토어를 한 개 이상 만들면 안 된다. 여러 개의 스토어를 만드는 것은 가능하긴 한데 권장하지는 않는다.

2. 상태는 읽기 전용이다. 즉 불변성을 지켜줘야 한다는 뜻이다.(객체는 spread 연산자를 사용해서 객체를 복사한 뒤 특정 값을 덮어써야 하고, 배열은 push 보다는 concat, filter 등 불변성을 지키는 내장 함수를 사용해야 한다.) 불변성을 지켜야만 컴포넌트가 제대로 리렌더링 된다.

3. 변화를 일으키는 함수 리듀서는 순수한 함수여야 한다.(순수한 함수란, 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다. 이전의 상태는 절대로 변경하지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환한다.(불변성 유지) 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야 한다.

4. new Data(), Math.random(), axios.get() 함수를 사용하면 안 된다. 호출할 때마다 다른 값을 가져오기 때문이다. state와 action만 의존해서 새로운 상태를 만들어줘야 한다.