[TIL025] 리액트 부트캠프 25일차

20240522 25일차

💻오늘 하루 요약!
리액트 심화 과정 강의 수강

---

Redux

아직 제대로 이해하지 못했기 때문에 이해한대로 작성함..

Redux란?

프로젝트의 규모가 커지게 된다면 상태 관리가 힘들어진다.
발생한 오류도 찾아내기 힘들고, 리렌더링도 잦아진다.
이러한 문제점들을 해결하기 위해 상태 관리 라이브러리가 고안된 것이다.
바로 Redux가 상태 관리 라이브러리 중 대표적인 라이브러리이다.

Redux 용어

1. Actions

액션은 상태 변경을 요청하는 객체이다. 반드시 type 키를 같은 프로퍼티를 가져야하고, 다른 정보가 담긴 프로퍼티를 갖을 수 있다.

const action = {
  type: 'ADD_TODO',
  payload: {
    text: '리덕스 어려워'
  }
};

2. Reducer

리듀서는 현재 상태와 액션을 받아서 새로운 상태를 반환하는 순수 함수이다. 이를 통해 상태 변경이 예측 가능하고 디버깅을 용이하게 만든다.

순수함수란
입력값이 동일하면 항상 동일한 출력값을 반환
외부 상태를 변경하지 않는다.

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

3. Store

스토어는 애플리케이션의 상태를 관리한다.

대표 메서드

• getState: 상태를 읽는 데 사용하는 메서드
• dispatch: 상태를 변경하는 데 사용하하는 메서드
• subscribe : 리스너를 등록하기 위한 메서드

import { createStore } from 'redux';

const store = createStore(counterReducer);

Redux의 동작 방식

1. 액션 생성
2. 액션 디스패치
3. 리듀서가 현재 상태와 액션을 받아 새로운 상태를 반환
4. 스토어가 새로운 상태로 업데이트

기존 리액트와의 차이점

1. 상태 관리
기존 코드: 각 컴포넌트들에 의해 관리
Redux 코드: Store를 통해서 관리가 이루어지고, 이를 통해 상태가 공유가 됨

2. 상태 변경
기존 코드: setState를 통해 상태 변경이 이루어짐
Redux 코드: 액션을 통해 이루어짐

3. 상태 변경 로직
기존 코드: 상태가 컴포넌트 내에 분산되어 있음
Redux 코드: 리듀서라는 순수 함수로 분리