재영 블로그

redix_basoc

January 13, 2020

redux

리덕스는 가장 많이 사용하는 리액트 상태관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 리덕스는 전역 상태를 관리할 때 굉장히 효과적인데 단순히 전역 상태 관리만 한다면 Context API를 사용하는 것만으로도 충분하지만 리덕스를 사용하면 더욱 체계적으로 관리할 수 있기에 프로젝트 규모가 클 경우에는 리덕스를 사용하는 편이 좋다.

개념정리

  • 액션

상태에 어떠한 변화가 필요하면 액션이 발생한다. 이는 하나의 객체로 표현된다

{
  type: 'TOGGLE_VALUE'
}

액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다. 그리고 그외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이다.

  • 액션 생성 함수

액션 생성 함수는 액션 객체를 만들어 주는 함수이다.

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

화살표 함수도 가능하며 어떠한 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 만드는 과정에서 실수로 정보를 놓칠 수 있기에 이러한 일을 방지하기 위해 이를 함수로 만들어서 관리한다.

  • 리듀서

리듀서는 변화를 일으키는 함수이다. 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다. 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해준다.

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

  • 스토어

프로젝트에 리덕스를 적용하기 위해 스토어를 만든다. 스토어 안에는 현재 어플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇 가지 중요한 내장 함수를 지닌다.

  • 디스패치

디스패치는 스토어의 내장 함수 중 하나이다. 디스패치는 액션을 발생시키는것 이라고 이해하면 된다. 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다. 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 준다.

  • 구독

구독도 스토어의 내장 함수 중 하나이다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해주면 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다.

const listener = () => {
  console.log('상태 업데이트')
}
const unsubscribe = store.subscribe(listener)
unsubscribe() //  구독 비활성화 시 호출

리덕스의 세 가지 규칙

  • 단일 스토어

하나의 어플리케이션 아넹는 하나의 스토어가 들어 있다. 여러개를 사용하는것이 완전히 불가능하지는 않으나 특정 업데이트가 너무 빈번하게 일어나거나 특정 부분을 완전히 분리시킬떄 여러 개의 스토어를 만들 수도 있지만, 상태 관리가 복잡해질 수 있으므로 권장하지 않는다.

  • 읽기 전용 상태

리덕스 상태는 읽기 전용이다. 기존에 리액트에서 setState를 사용하여 state를 업데이트할 때도 객체나 배열을 업데이트 하는 과정에서 불변성을 지켜 주기 위해 전개연산자를 사용한 것 처럼 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 한다 (내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문)

  • 리듀서는 순수한 함수

변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 순수한 함수의 조건

  • 리듀서 함수는 이전 상태와 액션 객체를 매개변수로 받는다.
  • 매개변수 외의 값에는 의존하면 안된다.
  • 이전 상태는 건드리지 않고 변화를 준 새로운 상태 객체를 만들어서 반환한다.
  • 똑같은 매개변수로 호출된 리듀서 함수는 언제나 같은 결과 값을 반환해야 한다.

리듀서를 작성할 때는 위 네가지 사항을 주의해야함 함수 내부에서 랜덤값을 만들거나, Date 함수를 사용하여 현재 시간을 가져오거나 네트워크 요청을 한다면 매개변수가 같아도 다른 결과를 만들어 낼 수 있기 때문에 사용하면 안된다. 이럴시 함수 바깥에서 처리해야한다

Written by@jaeyoung-son
배운것을 기록하는 공간입니다.

GitHub