리덕스(redux)
- 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리
redux를 사용하기 적절한 때
- 계속해서 바뀌는 상당한 양의 데이터가 있음
- 상태를 위한 단 하나의 근원이 필요함
- 최상위 컴포넌트가 모든 상태를 가지고 있는 것은 적절하지 않음
redux 기본 개념
1. Single source of truth
- 동일한 데이터는 항상 같은 곳에서 가지고 온다.
- 즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미이다.
2. State is read-only
- 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
- 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
3. Changes are made with pure functions
- 변경은 순수함수로만 가능하다.
- 리듀서와 연관되는 개념이다.
- Store(스토어) – Action(액션) – Reducer(리듀서)
-> 리액트를 사용하면, 상태값을 컴포넌트에 종속시키지 않고 상태 관리를 바깥에서 관리할 수 있음
RTK (Redux Toolkit)
- redux 로직을 작성하기 위해 redux 공식 문서에 추천하는 방법
- 저장소 준비, 리듀서 생산과 불변 수정 로직 작성, 상태 "조각" 전부를 한번에 작성 등 일반적인 작업들을 단순화해주는 유틸리티를 포함
상태값을 저장하는 저장소 : 스토어(Store)
- 스토어(store)는 상태가 관리되는 오직 하나의 공간
- 컴포넌트와는 별개로 스터오라는 공간이 있어 그 스토어 안에 앱에서 필요한 상태를 담음
- 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근
- 스토어(Store)는 모든 상태 값을 저장하며 상태 값을 조작할 리듀서(Reducer) 함수를 인자로 받음.
- createStore를 사용하여 스토어를 만듦
상태를 조작하는 함수 : 리듀서(Reducer)
- 액션을 스토어에 바로 전달하는 것이 아니라 리듀서에 전달해야함
- 리듀서가 주문을 보고 스토어의 상태를 업데이트함
- 액션을 리듀서에 전달하기 위해 dispatch() 메소드를 사용
- 디스패처(Dispatcher) 함수는 액션 값과 상태에 관한 데이터를 리듀서(Reducer) 함수에 전달하는 역할
- 액션을 리듀서에 전달하기 위해 dispatch() 메소드를 사용
- 리듀서(Reducer) 함수는 초기 상태 값과 액션(action)을 인자로 받아 액션에 조작할 상태(State)를 지정하는 역할
- 변화를 일으켜주는 함수
- 이 함수에는 각 액션타입마다, 액션이 들어오면 어떤 변화를 일으킬지 정의함.
- 변화를 일으킬 때에는 불변성을 유지시켜야함
어떤 변화가 필요할 때 발생시키는 신호 객체 : 액션(Action)
- Action은 앱에서 스토어에 운반할 데이터(주문서)로 js 객체 형식임
- 어떤 데이터를 어떻게 바꿀 것이냐에 대한 일종의 신호를 의미
- 어떤 동작에 대해 선언된 액션(Action) 객체는 type이라는 필드를 변화가 필요한 상황을 인지하기위해 사용하며 이 객체에 변화할 때 필요한 데이터를 담을 수도 있음
- 액션 함수를 만드는 이유 : 그때 그때 액션을 만들 때마다 직접 {이러한 객체} 형식으로 객체를 일일이 생성하는 것이 번거롭기 때문에 이를 함수화한 것
Action(액션) 객체가 dispatch() 메소드에 전달된다.
dispatch(액션)를 통해 Reducer를 호출한다.
Reducer는 새로운 Store 를 생성한다.
참고 : https://velopert.com/3528 , https://hanamon.kr/redux%EB%9E%80-%EB%A6%AC%EB%8D%95%EC%8A%A4-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC/
'React' 카테고리의 다른 글
[React] Debounce_lodash 활용 (1) | 2023.10.11 |
---|---|
[React] 리덕스 (1) | 2023.06.01 |
[React] 백엔드 프로그래밍 : Node.js의 Koa 프레임워크 (0) | 2023.05.03 |
[React] 서버 사이드 렌더링 (0) | 2023.05.02 |
[React] 코드 스플리팅 (0) | 2023.05.01 |