[TIL : 29] 상태 관리 Redux

jabae·2021년 12월 4일
1

TIL

목록 보기
29/44

Achievement Goals

  • 상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.

    상태를 이해하기 위해서 일단 공식문서 'React로 사고하기' 읽기

  • Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
    • Store : 상태가 관리되는 단 하나의 공간! (컴포넌트와 별개이다.) 아래는 createStore 메소드를 활용해 reducer를 연결하는 방법이다.
    import { createStore } from "redux";
    
    const store = createStore(rootReducer);
    • Action : Store에게 운반할 데이터, 어떤 액션을 취할 것인지 정의한 자바스크립트 객체이다. type은 필수로 지정해 주고, 그 외의 것들은 선택적으로 사용한다.
    export const addToCart = (itemId) => {
      return { type: ADD_TO_CART,
       	   payload: {
       	   quantity: 1,
       	   itemId
        } 
      }
    }
    export const removeFromCart = (itemId) => {
      // ...
    }
    // ...이렇게 액션들을 모아놓는다.
    • Reducer: 현재 상태와 Action을 이용해 다음(새로운) 상태를 만들어 내는 pure function이다. Reducer 함수를 작성할 때 주의해야 할 점은 state 업데이트는 immutable한 방식으로 변경해야 한다는 것이다.(Object.assign()를 이용!)
      아래는 쇼핑몰의 장바구니 액션에 대한 reducer이다.
    const itemReducer = (state = initialState, action) => {
      switch (action.type) {      // action에서 필수적으로 써 준 type으로 분기
        case ADD_TO_CART:
          return Object.assign({}, state, {
            cartItems: [...state.cartItems, action.payload]
          });
          break;
        case REMOVE_FROM_CART:
          return Object.assign({}, state, {
            cartItems: [...state.cartItems].filter(el => el.itemId !== action.payload.itemId)
          });
          break;
        default:
          return state;
      }
    }
  • Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.

    Redux의 3가지 원칙

    • Single source of truth : 동일한 데이터는 항상 같은 곳(Store)에서 데이터를 받아온다.
    • State is read-only : React에서 setState로 상태를 변경했듯이 Redux는 Action으로만 상태를 변경할 수 있다
    • Changes are made with pure functions : 순수 함수인 Reducer를 통해 이전 상태와 Action을 받아 다음 상태를 반환한다.

    *다음 순서를 기억할 것
    Action 객체 -> Dispatch 전달 -> Reducer 호출 -> New State !

  • Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.

    Presentational 컴포넌트 : 화면(UI)를 표현하는 부분 ex. App.js
    Container 컴포넌트 : 데이터를 다루는 부분 ex. 그 외 Component...

  • Redux hooks(useSelector, useDispatch)를 사용할 수 있다.
    • useSelector: 컴포넌트와 state를 연결하는 역할을 한다. 컴포넌트에서 useSelector 메소드를 통해 store의 state에 접근할 수 있다.
    • useDispatch: Action을 전달하는 메소드로, dispatch로 Reducer를 호출해 state의 값을 바꾸는 역할을 한다. 예를 들어, Action 이 일어날만한 곳은 클릭 등의 이벤트가 일어나는 컴포넌트이다.
      아래는 위의 쇼핑몰 장바구니 액션을 활용한 예시이다.
    import React from 'react';
    import { useSelector, useDispatch } from 'react-redux';
    
    function ItemListContainer() {
      const state = useSelector(state => state.itemReducer); // 위에서 만든 Reducer함수와 연결
      const dispatch = useDispatch();
    
      const handleClick = (item) => {
        dispatch(addToCart(item))  // 이런 식으로 아이템을 담아 리듀서를 호출한다.
      }
    
      return (
        <>
          // ...
            <Item item={item} key={idx} handleClick={() => {handleClick(item)}} />
        </>
      )
    }

    자세한 건 공식문서 'react-redux'를 참고하자!

profile
it's me!:)

0개의 댓글