컴포넌트간의 데이터 흐름
일반적으로 부모-자식관계에서는 props-state로 전달받으나, 컴포넌트의 단계가 많아지거나 부모-자식 관계가 아닌 경우에는 useContext나 redux를 사용하려 전역으로 관리합니다.
Context API
리액트의 내장기능으로, 상태 및 데이터를 전역으로 관리한다. 상태관리 라이브러리인 redux나 mobx보다는 가벼운 프로젝트에서 사용
컴포넌트간의 데이터 흐름이 명확해져 유지보수가 용이함
부모-자식간의 관계가 아닌 컴포넌트나 구조가 복잡한 프로젝트에서 사용합니다. 리덕스보다 가벼운 기본 내장 라이브러리로 규모가 크지않은 프로젝트에서 사용하는것이 적합합니다.
Redux
MVC 패턴 형식으로 state가 변화되면 양방향데이터 흐름으로 상태관리가 어려움, 데이터 흐름을 단방향으로 관리하기위해 사용
3가지 규칙
-
단일 스토어
불변의 상태관리를 위해 프로젝트당 스토어는 하나만 사용하기를 권장 -
읽기 전용 상태
상태를 업데이트할 때 기존의 객체를 건드리지 않고 새로운 객체를 생성해야함 (Spread 연산자 사용 이유 )
리덕스에서 불변성을 유지하는 이유는 내부적으로 데이터가 변경되는것을 감지하기위해 얕은 비교를 하기 때문임
- 얕은 비교 : 기본 데이터는 값만 비교, 객체의 경우 참조를 비교
- 깊은 비교 : 기본 데이터는 타입까지 비교, 객체의 경우 값으로 비교
- Reducer는 순수 함수
변화를 일으키는 리듀서 함수는 순수한 함수여야함
+ ㄷㄹ
+ 이전 상태와 액션 객체를 파라미터로 받음
+ 파라미터외에 값에는 의존 X
+ 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환함
+ 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환함 (리듀서 함수 내에서는 현재 시간을 가져오거나 네트워크 요청등을 하면 다른 값을 반환하므로 이건 리듀서 함수 외부에서 처리해야함 )
함수
-
views
데이터를 변경시키지않고 action을 넘겨준다, 반드시 dispatch를 통해서 데이터를 변경한다.
변경된 데이터를 store를 통해 view가 전달받는다. -
Reducer
변화를 일으키는 함수로, 액션을 만들어서 발생시키면 현재상태와 전달받은 액션 객체를 파라미터로 받아온다.
상태의 불변성을 유지하면서 데이터에 변화를 만듦, spread 연산자 사용하면 편함
=> 액션에 따라 상태를 어떻게 변경할지 정의하는 함수로, 순수 함수여야함 ( 새로운 상태 객체를 반환 ) -
Store
+ 프로젝트에 리덕스를 적용하기 위해 만듦, 한 개의 프로젝트에는 단 하나의 스토어만 가질 수 있다.
애플리케이션의 전역 상태를 보유하고 있으며 상태 접근 및 수정을 위한 메서드 제공 -
Dispatch
스토어의 내장 함수 중 하나로, 액션을 발생시키는 것으로 액션 객체를 파라미터로 넣어서 호출
, 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만듦
= 액션을 스토어에 전달하는 메서드로, 디스패치를 통해 액션을 발생시키면 리듀서가 이를 처리하고 상태를 업데이트함. -
action : 애플리케이션에서 일어나는 모든 변화는 액션을 통해 설명됨, 액션의 상태를 어떻게 변경해야할지 정의
-
subscribe : 리덕스 스토어의 상태가 변경될때마다 실행할 콜백함수를 등록하는 기능을 제공
리덕스 툴킷
duck 패턴 요소가 전체적인 코드량을 늘려 더 사용하기 편하게 만든 라이브러리로, 셋팅 자동화의 개념이다.
createSlice 함수를 사용하여 리듀서와 액션을 함께 정의한다
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name : 'counter',
initialState : 0,
reduver : {
increment: state => state+1, // 액션 생성자
decrement: state => state-1
},
});
export const { increment, decrement } = counterSlice.actions;
export default conterSlice.reducer;
import { counfigerSter } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
// counfigureStore함수를 통해 store 생성
const store = counfigureStore({
reducer : {
counter : coutnerReducer,
}
})
export default store;