[TIL] Day43- React 상태관리(2)
Achievement goals
- 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
- Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
- Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
- Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
- Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.
Redux
- Redux란?
Redux는 한마디로 상태관리 라이브러리
리덕스가 생겨난 이유는 SPA(single page application)에서 많은 state를 가지게 되고 이런 state를 트리 구조중 하위 브랜치에 state를 보낼경우와 여러 브랜치가 한 state를 사용할 경우 복잡해지는 경우가 많기 때문에 Redux는 이 모든 state를 저장하고 있는 store라고 말 할 수 있다.
- Action(액션)
액션은 애플리케이션에서 저장소로 보내는 데이터 묶음
액션은 자바스크립트 객체이며 액션은 반드시 어떤 형태의 액션이 실행될지 나타내는 type 속성을 가져야 한다. 이 type(타입)은 일반적으로 문자열 상수(const)로 정의
타입들을 별도의 모듈로 분리할수도 있음
store.dispatch() 을 통해서 보낼 수 있다.
const ADD_TO_CART = "ADD_TO_CART";
const addToCart = (itemId) => {
return {
type: ADD_TO_CART, //type 은 필수
payload: {
quantity: 1,
itemId
}
}
}
- Reducer(리듀서)
Reducer는 액션(객체)를 받아서 새로운 state(객체)를 반환하는 역할
여기까지를 흐름으로 간단하게 정리해 보면
- store에 모든 state들이 저장
- react component가 state를 요구
- action에서 dispatch(action)을 통해서 reducer로 전달
- 순수 함수인 reducer에서 action을 받아서 새로운 객체(새 상태)를 반환
- store에 새 상태를 전송
사용법
: reducer는 인자를 두개를 받는다. 첫번째인자는 이전 상태(previous state) 두번째인자는 액션(action)이다.
주의점
- 인수들을 변경 X
- API호출이나 라우팅처럼 사이드 이펙트를 야기하는것들을 사용 X
- Date.now()나 Math.random() 같이 순수하지 않은 함수를 호출 X
- spread syntax나 assign을 사용하여 새로운 객체를 리턴
import { ADD_TO_CART } from "../actions/index";
const itemReducer = (state = initialState, action) => {
// 원래 다양한 action이 들어오기 때문에 switch를 이용
switch (action.type) {
case ADD_TO_CART:
return Object.assign({}, state, {cartItems:[...state.cartItems,action.payload]})
}
}
- Store(저장소)
store 는 객체
store가 하는일
- 애플리케이션의 상태를 저장
- getState()를 통해 상태에 접근가능
- dispatch(action)를 통해 상태를 수정가능
- subscribe(listener)를 통해 리스너를 등록
사용법
combineReducers()를 사용하여 모아둔 리듀서를 createStore(리듀서)로 스토어를 생성 할 수 있다. 두번째 인자도 존재하는데, 이 두번째 인자는 초기 상태를 지정해주고 싶을때 사용한다.
const store = createStore(reducer, initState);//initState는 초기값
Work Flow
https://velog.io/@hwanieee/Redux
위의 사이트를 참고했다.
오늘 Redux에 대해서 실제로 코딩을 해봤지만 아직 완벽하게 익히진 못했다고 생각한다. 내일 다시한번 연습을 하면서 익혀야겠다.
Author And Source
이 문제에 관하여([TIL] Day43- React 상태관리(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@source39/TIL-Day43-React-상태관리2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)