🌱 상태 관리
- 상태 : UI에 동적으로 표현될 변하는 데이터
- Side Effect : 함수 또는 컴포넌트의 입력 외에도 함수의 결과에 영향을 미치는 요인 (ex. 네트워크(API) 요청)
🌿 기존 상태 관리의 문제점
1. 해당 상태를 직접 사용하지 않는 최상위 컴포넌트, 컴포넌트1, 컴포넌트2도 상태 데이터를 가짐.
2. 상태 끌어올리기, Props 내려주기를 여러 번 거쳐야 함.
3. 애플리케이션이 복잡해질수록 데이터 흐름도 복잡해짐.
4. 컴포넌트 구조가 바뀐다면, 지금의 데이터 흐름을 완전히 바꿔야 할 수도 있음.
🌱 Redux (Reducer + Flux)
-
정의 : 컴포넌트와 상태를 분리하여 전역에서 상태 관리를 해줄 수 있게 해주는 상태 관리 라이브러리 (React 없이도 사용할 수 있음!)
-
필요성 :
- 전역 상태를 관리할 수 있는 저장소인 Store를 제공
- React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어지므로 데이터 흐름이 깔끔해짐
- 컴포넌트와 상태를 분리하는 패턴이 로직을 단순하게 함
🌿 상태 관리 순서
- 상태가 변경 이벤트 발생 시, 변경될 상태 정보가 담긴 Action 객체 생성된다.
- 생성된 Action 객체는 Dispatch 함수의 인자로 전달된다.
- Dispatch 함수는 Action 객체를 Reducer 함수로 전달한다.
- Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.
- 상태가 변경되면, React는 화면을 리렌더링 한다.
Redux는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐르게 된다!
Action: 어떤 액션을 취할 것인지 정의해 놓은 객체- type 은 필수로 지정해야 함
- 대문자와 Snake Case로 작성함
- 필요에 따라 payload 를 작성해 구체적인 값을 전달
- Action을 직접 작성하기보다는 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많음 (액션 생성자(Action Creater)라고 함)
/* 액션 객체 */
// payload가 필요 없는 경우
{ type: 'INCREASE' }
// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }
/* 사용 예시 */
// payload가 필요 없는 경우
const increase = () => {
return {
type: 'INCREASE'
}
}
// payload가 필요한 경우
const setNumber = (num) => {
return {
type: 'SET_NUMBER',
payload: num
}
}Dispatch: Reducer로 Action을 전달해주는 함수- Dispatch의 전달인자로 Action 객체가 전달됨
- Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출함
// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );
// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );Reducer: Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수- Reducer는 순수 함수여야 함 (엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문)
- 여러 개의 Reducer를 사용하는 경우, Redux의 combineReducers 메서드를 사용해서 하나의 Reducer로 합쳐줄 수 있음
const count = 1
// Reducer를 생성할 때에는 초기 상태를 인자로 요구함
const counterReducer = (state = count, action) {
// Action 객체의 type 값에 따라 분기하는 switch 조건문
switch (action.type)
//action === 'INCREASE'일 경우
case 'INCREASE':
return state + 1
// action === 'DECREASE'일 경우
case 'DECREASE':
return state - 1
// action === 'SET_NUMBER'일 경우
case 'SET_NUMBER':
return action.payload
// 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
default:
return state;
}
// Reducer가 리턴하는 값이 새로운 상태가 됨// combineReducers 활용
import { combineReducers } from 'redux';
const rootReducer = combineReducers({
counterReducer,
anyReducer,
...
});Store: 상태가 관리되는 오직 하나뿐인 저장소의 역할, Redux 앱의 state가 저장되어 있는 공간- createStore 메서드를 활용해 Reducer를 연결해서 Store를 생성할 수 있음
import { createStore } from 'redux';
const store = createStore(rootReducer);이 개념들은 Redux Hooks를 이용하면 된다!
🌱 Redux Hooks
- Redux Hooks는 React에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드를 제공한다. 그 중 크게 useSelector(), useDispatch() 이 두 가지의 메서드를 많이 사용한다.
🌿 useSelector()
- 정의 : 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드
// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러온다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state.counterReducer)
console.log(counter) // 1🌿 useDispatch()
- 정의 : Action 객체를 Reducer로 전달해 주는 메서드입니다. 위에서 Dispatch를 설명할 때 사용한 dispatch 함수도 useDispatch()를 사용한 것입니다.
import { useDispatch } from 'react-redux'
const dispatch = useDispatch()
dispatch( increase() )
console.log(counter) // 2
dispatch( setNumber(5) )
console.log(counter) // 5🌱 Redux의 세 가지 원칙
-
Single source of truth (SSOT)
: 단일 진실 공급원이라는 의미로, 동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미. 즉, Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결이 되는 원칙. -
State is read-only
: 상태는 읽기 전용이라는 의미로, React에서 상태 갱신 함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미한다. 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙. -
Changes are made with pure functions
: 변경은 순수함수로만 가능하다는 의미로, 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야하는 Reducer와 연결되는 원칙.
🌱 Check List
- 로컬 상태와 전역 상태의 차이점을 이해한다.
- 전역 상태의 필요성을 이해한다.
- 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
- Redux에서 사용하는 Action, Dispatcher, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
- Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
🌱 알게된 점 & 느낀 점
- 프로젝트 규모가 커질수록 리덕스가 필수적이게 될 것이라 생각했다.
- 리덕스,,,,너 쫌 쿨하다
🌱 추가 학습
- Redux 과제 다시 복습
- Redux Toolkit
| 참고자료 |
FE developer