React - 6장 : 컴포넌트 반복
React - 7장 : 컴포넌트의 LifeCycle
React - 8장 : React Hooks 총정리
React - 12장 : immer를 사용하여 더 쉽게 불변성 유지하기
React - 13장 : 리액트 라우터로 SPA 개발하기
React - 16장 : 리덕스 라이브러리의 이해(현재)
16-1. 리덕스란 ?
- 가장 많이 사용하는 리액트 상태 관리 라이브러리이다.
- 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분시리켜서 더욱 효율적으로 관리할 수 있다.
- 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 경우에도 손쉽게 상태를 전달하거나 업데이트 할 수 있다.
- 전역 상태를 관리할 경우 효과적이다.
- Context API로도 충분히 관리가 가능하지만, Redux로 상태를 더욱 체계적으로 관리할 수 있기 때문에 대규모 프로젝트의 경우 사용하는 편이 좋다.
- 개발자 도구도 지원하며, 미들웨어도 제공한다.
- 꼰대 라이브러리이므로 Zustand 이런 MZ라이브러리랑 비교하면서 도입하는 것이 좋다.
16-2. 개념 미리 정리하기
16.1.1 액션(action)
- 상태에 어떠한 변화가 필요하면 액션이 발생한다.
- 이렇게 생김
- 액션 객체는 type 필드를 반드시 가지고 있어야 한다. (액션의 이름이다.)
예시 액션
16.1.2 액션(action) 생성 함수
- 액션 객체를 만들어 주는 함수.
- 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 작성하기 번거롭고, 실수할 가능성도 있으므로 함수로 만들어서 관리한다.
16.1.3 리듀서
- 변화를 일으키는 함수이다.
- 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다.
- 두 값을 참고하여 새로운 상태를 만들어서 반환한다.
리듀서의 형태
16.1.4 스토어(store)
- 프로젝트에 리덕스 적용을 위해 스토어를 만든다.
- 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다.
- 스토어 안에는 현재 앱의 상태와 리듀서가 들어가 있으며, 그 외에도 몇가지 내장 함수를 가진다.
16.1.4 디스패치(dispatch)
- 스토어의 내장함수
- 액션을 발생시키는 것
- dispatch(action) 의 형태로 액션 객체를 파라미터로 넣어서 호출한다.
- 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어준다.
16.1.4 구독(subscribe)
- 스토어의 내장함수
- subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출하면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트 될 때마다 호출된다.
예시
16-2. 리덕스의 규칙
16.2.1 단일 스토어
- 하나의 앱 안에는 하나의 스토어
16.2.2 읽기 전용 상태
- 리덕스의 상태는 읽기 전용.
- 상태를업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 한다. (불변성 유지)
- 불변성 유지하는 이유? : 내부적으로 데이터 변경 감지를 위해 얕은 비교 검사를 하기 때문이다. 그래서 성능이 좋기 때문이다.
16.2.3 리듀서는 순수한 함수
- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
- 파라미터 외의 값에는 의존하면 안 된다.
- 이전 상태는 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.
- 똑같은 파라미터로 호출된 리듀서 함수는 똑같은 결과 값을 반환해야 한다.
- 리듀서 함수 내부에서 Date(), 네트워크 요청을 하면 안 된다.
- 네트워크 요청같은 비동기 작업은 미들웨어를 통해 관리한다.
'Frontend > ReactJS(완)' 카테고리의 다른 글
| React - 18장 : 리덕스 미들웨어를 통한 비동기 작업 관리 (0) | 2023.03.01 |
|---|---|
| React - 17장 : 리액트 리덕스 실습 예제(React-Redux) (0) | 2023.02.28 |
| 추가) React에서의 PWA (0) | 2023.02.24 |
| 추가) React State 관리 성능개선과 Hooks (0) | 2023.02.24 |
| React - 15장 : ContextAPI (0) | 2023.02.23 |
댓글