처음 배울 때 알아야 하는 리덕스 작동 방식

리덕스

리덕스를 배우기 전 리액트에서 state에 대한 이해가 중요하다.
결국엔 리덕스도 상태 관리(전역)하는 툴이기 때문에 state를 잘 아는 것은 중요하다.

또한 리덕스는 리액트의 Context API 기반으로 만들어졌기 때문에 Context API를 먼저 학습하고 온다면 더 이해가 쉬울 것으로 생각한다.

그럼 시작해보자!

state의 이해

Local State

• 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태
• useState 혹은 useReducer를 통해 로컬 상태 관리를 한다

Cross-Component State

• 다수의 컴포넌트의 영향을 미치는 상태 ex) 모달 컴포넌트
• props 드릴링이나 props 체이닝 필요

App-Wide State

• 모든 컴포넌트의 영향을 미치는 상태 ex) 사용자 인증
• props 드릴링이나 props 체이닝 필요

Context가 있는데 왜 Redux를 써야하는가?

Context의 잠재적 단점

1. 복잡한 셋업과 상태관리
   1. 대형 프로젝트일 때 복잡성이 문제가됨 → ContextProvider가 엄청 많아짐
2. 성능
   1. like 테마 변경 or 인증, 저빈도 업데이트는 좋지만 잦은 상태 변경은 성능 저하를 일으킴

리덕스의 작동 방식

• Central Data (state) Store
  • 모든 전역 데이터를 관리
  • reducer라는 일반적인 프로그래밍 개념을 통해 데이터 변경, useReducer와는 다른 개념
• reducer 함수를 통한 데이터 변경

1. Subscribe - 컴포넌트는 리덕스 스토어를 구독 → 데이터 변경시 필요한 데이터를 받음
2. Mutate - 컴포넌트에서 변경X, 리덕스 스토어에서만 데이터 변경 가능
3. Dispatch - 실행할 action을 발송
4. Action - JS 객체이고 작업할 내용을 리듀서에 설명, 리덕스는 action을 리듀서로 전달

• 데이터 변경 흐름
  • 컴포넌트에서 원하는 action을 리덕스로 dispatch → 리덕스는 action을 리듀서로 전달 → 리듀서는 action을 실행 → 중앙 데이터 저장소의 데이터 변경(새로운 상태 업데이트) → 구독 중인 컴포넌트가 알림을 받음 → 컴포넌트는 UI를 업데이트

리덕스 프로젝트

• $ npm install redux react-redux
  • react-redux → 리액트 앱의 리덕스가 잘 연결되게 해주고 추가적이 기능이 있음
• 리듀서로 상태 변경시 기존 상태를 덮어씌우는 형식으로 동작한다.
• 따라서 두개의 상태 값 중 하나의 상태만 바꾸더라도 나머지 하나의 상태 값은 기존의 상태로 설정해줘야 한다.

  const counterReducer = (state = initialState, action) => {
    if (action.type === 'increment') {
      return {
        counter: state.counter + 1,
        // showCounter 값은 기존 상태를 유지해야함
        showCounter: state.showCounter
      }
    }
  }

• 왜 리듀서는 새 데이터를 반환 할까?

  • 왜 상태를 직접 변경하는 형태는 안될까?

    const counterReducer = (state = initialState, action) => {
      if (action.type === 'increment') {
        state.counter++
    		return state
      }
    }

  • useState와 마찬가지로 리덕스 또한 state를 직접 변경하면 안된다.

  • 새로운 state 객체를 반환해서 항상 재정의 해줘야함!

  • 객체와 배열은 참조값이기 때문에 직접 state를 변경하면 계속해서 원본 state를 변형시킨다

  • 절대 state를 직접 변경하지말고, 항상 새 객체 값을 생성해야함!