[TIL] Redux란?

Redux란?

리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리이다

리덕스를 사용하면 위 그림과 같이 스토어에서 모든 상태 관리가 일어난다. 상태에 어떤 변화를 일으켜야 할 때는 **액션(Action)**이라는 것을 스토어에 전달한다. 액션은 객체 형태로 되어 있으며, 상태를 변화시킬 때 이 객체를 참조하여 변화를 일으킨다. 액션을 전달하는 과정은 **디스패치(dispatch)**라고 한다.

스토어가 액션을 받으면 **리듀서(Reducer)**가 전달받은 액션을 기반으로 상태를 어떻게 변경시켜야 할지 정한다. 액션을 처리하면 새 상태를 스토어에 저장한다. 크게 저장소(store), 명령(dispatch), 구독(subscribe) 3가지로 나눠볼 수 있다. 저장소(store)에 뭔가 바꾸고 싶으면 명령(dispatch)을 이용해 바꾸고, 관심 있는 사람(함수)가 값이 바뀔 때마다 받아보는 것이다. 이때 “나 관심있어요”라고 말해주는 행동이 구독(subscribe)이다.

스토어(store)

리덕스 한 개의 애플리케이션에 하나의 스토어가 존재하며 모든 상태는 하나의 스토어에서 관리하며 현재의 앱 상태와 리듀서, 추가적인 내장 함수들이 있으며 리듀스에 의해서만 state의 값이 변경된다 스토어는 아래와 같이 내장함수를 갖고 있다

  • dispatch
  • subscrilbe
  • getState
const reducer = () => {} //reducer는 데이터를 수정(modify)하는 곳

const store = createStore(reducer) // store라는 변수에 스토어를 생성하고 프로퍼티로 리듀를 받는다

액션(action)

store.dispatch({ type: 'ADD' })

액션은 상태변화를 일으키기 위해 발생시켜야 하는데 스토어에서 설명했듯이 내장함수가 있는데 그중 하나인 dispatch를 통해 액션을 발생시킬 수 있으며 객체 안에는 반드시 type이 들어가야 한다 이렇게 발생시킨 액션은 리듀서 함수에서 어떻게 값을 업데이트할지 정한다.

위 방식처럼 type에 바로 문자열을 추가해도 되지만 아래와 같이 안전하게 따로 변수를 만들어 사용하는 게 더 보편적이다.

const ADD = 'ADD'
const MINUS = 'MINUS'

countStore.dispatch({ type: ADD })
countStore.dispatch({ type: MINUS })

리듀서(reducer)

리듀서는 이전 상태와 액션을 받아서 다음 상태를 반환한다 즉 state를 입력값으로 받고 action을 참조해서 새로운 state 값을 만들어서 리턴한다 아래 코드는 count를 더하고 빼는 리듀서이다

const reducer = (state = 0, action) => {
  switch (action.type) {
    case ADD:
      return count + 1
    case MINUS:
      return count - 1
    default:
      return count
  }
}

const store = createStore(reducer)

리듀서 함수에 2개의 파라미터를 받는데 첫 번째는 이전 상태인 state가 두 번째는 위에서 발생시킨 action의 객체를 받아온다 그래서 리듀스 함수가 상태를 업데이트하면 그에 따라 맞는 리턴 값으로 render가 다시 일어난다.

아래 코드로 다시 한번 정리해보자 아래 코드는 count를 할 수 있는 코드이다

add.addEventListener('click', handleAdd)
minus.addEventListener('click', handleMinus) //add, minus버튼에 이벤트를 추가한다

const ADD = 'ADD'
const MINUS = 'MINUS'

const handleAdd = () => {
  store.dispatch({ type: ADD }) // add버튼을 누르면 이 함수 이벤트가 발생하며 리듀서로 액션(type) 값을 보내준다
}

const handleMinus = () => {
  store.dispatch({ type: MINUS }) // minus버튼을 누르면 이 함수 이벤트가 발생하며 리듀서로 액션(type) 값을 보내준다
}

const reducer = (count = 0, action) => {
  // count=0 은 초깃값을 주느것.
  switch (
    action.type //// 이벤트 함수를 통해 받아온 현재값(count)를 참조하여 액션을 switch문을 통해 업데이트 할 값을 정한다
  ) {
    case ADD:
      return count + 1 // 즉 type이 ADD 라는 액션을 받으면 현재값인 count에서 + 1 을 더해주는것.
    case MINUS:
      return count - 1 // 즉 type이 MINUS 라는 액션을 받으면 현재값인 count에서 - 1 을 빼주는것.
    default:
      return count
  }
}