본문으로 건너뛰기
비공식 베타 번역

이 페이지는 PageTurner AI로 번역되었습니다(베타). 프로젝트 공식 승인을 받지 않았습니다. 오류를 발견하셨나요? 문제 신고 →

리듀서 필수 선행 개념

"Redux Fundamentals" Part 3: State, Actions, and Reducers에서 설명한 것처럼, Redux 리듀서 함수는 다음과 같습니다:

  • (previousState, action) => newState 시그니처를 가져야 하며, 이는 Array.prototype.reduce(reducer, ?initialValue)에 전달하는 함수 유형과 유사합니다.

  • "순수(pure)"해야 합니다. 즉 리듀서는:

    • 사이드 이펙트를 수행하지 않음(예: API 호출 또는 비-로컬 객체/변수 수정)
    • 비순수 함수를 호출하지 않음(예: Date.now 또는 Math.random)
    • 인수를 변형(mutate)하지 않음. 상태 업데이트 시 기존 상태 객체를 직접 수정하지 않고, 필요한 변경 사항을 포함한 새로운 객체를 생성해야 합니다. 상태 내 하위 객체 업데이트 시에도 동일한 접근 방식을 적용합니다.
불변성, 사이드 이펙트, 변형에 대한 참고 사항​

변형(mutation)은 시간 여행 디버깅과 React Redux의 connect 기능을 방해하므로 권장되지 않습니다:

  • 시간 여행의 경우, Redux DevTools는 기록된 액션 재생 시 상태 값만 출력되고 다른 것은 변경되지 않을 것으로 기대합니다. 변형이나 비동기 동작 같은 사이드 이펙트는 단계 간 동작 변경을 유발해 애플리케이션을 손상시킵니다.
  • React Redux의 경우, connect는 컴포넌트 업데이트 여부를 판단하기 위해 mapStateToProps 함수가 반환한 props의 변경을 확인합니다. 성능 향상을 위해 connect는 상태의 불변성에 의존하는 단축 경로를 사용하며, 얕은 참조 비교로 변경 사항을 감지합니다. 이는 객체/배열에 직접 변형을 가한 변경 사항은 감지되지 않아 컴포넌트가 재렌더링되지 않음을 의미합니다.

리듀서 내 고유 ID/타임스탬프 생성 같은 기타 사이드 이펙트도 코드를 예측 불가능하게 만들어 디버깅과 테스트를 어렵게 합니다.

이러한 규칙들로 인해, Redux 리듀서 구성 기법을 더 살펴보기 전에 다음 핵심 개념들을 완전히 이해하는 것이 중요합니다:

Redux 리듀서 기초​

핵심 개념:

  • 상태(state)와 상태 구조(state shape) 측면에서 사고하기

  • 상태 조각별 업데이트 책임 위임(리듀서 구성)

  • 고차 리듀서(Higher order reducers)

  • 리듀서 초기 상태 정의

추천 자료:

순수 함수와 사이드 이펙트​

핵심 개념:

  • 사이드 이펙트

  • 순수 함수

  • 함수 조합 측면에서 사고하기

추천 자료:

불변 데이터 관리​

핵심 개념:

  • 가변성 vs 불변성

  • 객체와 배열을 안전하게 불변적으로 업데이트하기

  • 상태를 변이하는 함수와 구문 피하기

추천 자료:

데이터 정규화​

핵심 개념:

  • 데이터베이스 구조와 조직화

  • 관계형/중첩 데이터를 별도 테이블로 분리하기

  • 단일 항목에 대한 정의 저장하기

  • ID로 항목 참조하기

  • 항목 ID를 키로 한 객체를 조회 테이블로 사용하고, 순서 추적을 위해 ID 배열 활용하기

  • 관계에서 항목 연결하기

추천 자료: