Redux
Redux를 사용해야 하는 이유
- 컴포넌트 코드로부터 상태 관리 코드를 분리할 수 있다.
- 서버 렌더링 시 데이터 전달이 간편하다.
- 로컬 스토리지에 데이터를 저장하고 불러오는 코드를 쉽게 작성할 수 있다.
- 같은 상탯값을 다수의 컴포넌트에서 필요로 할 때 좋다.
- 부모 컴포넌트에서 깊은 곳에 있는 자식 컴포넌트에 상탯값을 전달할 때 좋다.
- 알림창과 같은 전역 컴포넌트의 상탯값을 관리할 때 좋다.
- 페이지가 전환되어도 데이터는 살아 있어야 할 때 좋다.
6.1 Redux 사용 시 세 가지 원칙
- 전체 상탯값을 하나의 객체에 저장한다.
- 상탯값은 불변 객체다.
- 상탯값은 순수 함수에 의해서만 변경되어야 한다.
1. 하나의 객체에 프로그램의 전체 상탯값을 저장한다.
- 하나의 객체를 직렬화(serialize)해서 서버와 클라이언트가 프로그램의 전체 상탯값을 서로 주고받을 수 있다.
- 최근 상탯값을 버리지 않고 저장해서 실행 취소(undo)와 다시 실행(redo) 기능을 쉽게 구현할 수 있다.
2. 상탯값을 불변 객체로 관리한다.
- 상탯값 수정이라는 하나의 목적만 놓고 보면 불변 객체를 사용하는 것 보다는 상탯값을 직접 수정하는게 더 빠름
- 하지만 이전 상탯값과 이후 상탯값을 비교해서 변경 여부를 파악할 때는 불변 객체가 훨씬 유리
- 상탯값 변경을 빠르게 확인할 수 있으면 메모이제이션 활용, 렌더링 성능을 올리는데 유리하다.
3. 오직 순수 함수에 의해서만 상탯값을 변경해야 한다.
- 리덕스에서 상탯값을 변경하는 함수를
리듀서(reducer)라고 한다. 리듀서는 이전 상탯값과 액션 객체를 입력으로 받아서 새로운 상탯값을 만드는 순수 함수다.
- 순수 함수는
부수 효과(side effect)를 발생시키지 않아야 한다.
- 순수 함수는 같은 인수에 대해 항상 같은 값을 반환해야 한다. 예를 들어 랜덤 함수나 시간 함수를 이용하면 순수 함수가 아니다.
부수 효과(side effect)란 전역 변수의 값을 수정한다거나 API 요청을 보내는 등 함수 외부의 상태를 변경시키는 것을 부수 효과라고 한다.
6.2 리덕스의 주요 개념 이해하기
6.2.1 액션
- 액션은 type 속성값을 가진 자바스크립트 객체. 액션 객체를 dispatch 메서드에 넣어서 호출하고 액션 객체에는 type 속성값 외에도 원하는 속성값을 얼마든지 넣을 수 있음.
- type이름은 고유한 type속성값을 사용해야 하는데 예를 들어
ADD라는 단어 하나만으로는 중복 가능성이 높다. 그래서 충돌을 피하기 위해 접두사를 붙이는 방법을 많이 사용한다.
- 액션 객체를 만들 때 type이외에 속성들이 항상 들어가야할 수 있기 때문에
액션생성함수를 사용한다.
6.2.2 미들웨어
Context API랑 비교
사용방법
Middleware
Saga?
사용방법
Redux Toolkit
사용방법
Reference
