🎯 Achievement Goals

상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.
Presentational 컴포넌트와 Container 컴포넌트의 개념을 이해할 수 있다.
Redux hooks(useSelector, useDispatch)를 사용해 store 를 업데이트할 수 있다.

👉 상태 관리 라이브러리 Redux

redux

오늘 urclass를 보면서 한 가지 알게 된 점이 있다. 바로 Redux는 React와 아무 상관이 없다는 것이다. 처음 React를 배울 때 Redux도 세트로 자주 들어서 관련 라이브러리인 줄 알았는데, Redux는 React없이도 사용할 수 있는 상태 관련 라이브러리이다.

그동안 했던 스프린트 과제나 내가 했던 클론 코딩은 규모가 작아서 Redux를 사용하지 않아도 props를 내려주는데 전혀 복잡하지 않았다. 하지만 규모가 커지고 프로젝트를 할 때에는 props를 10번 내려주는 일을 해서는 안되기 때문에… Redux를 잘 알아둬야 한다고 생각이 되었다.

Redux는 중앙 저장소 같은 개념이라고 생각하니 이해하기 쉬웠다. 중앙 저장소에 있는 State를 한 번에 가져다 쓸 수 있기 때문이다. 그렇기 때문에 안정적이고, 에러 찾기에도 쉬우나, 코드량이 많아진다는 단점이 있다.

👉 Redux - 3가지 원칙

1.Single source of truth

동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, State를 저장하는 하나뿐인 공간이 있다는 뜻이다.

2.State is read-only

Redux에서는 Action이라는 객체를 통해서 상태를 변경할 수 있다. Action은 자바스크립트 객체이다.

3.Change are made with pure functions

변경은 순수 함수로만 가능하다. Reducer와 관련이 있는 이야기이다.

redux2

Action객체는 Dispatch에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state를 생성한다. 이러한 규칙을 따르는 이유는 데이터가 한 방향으로 흘러야 하기 때문이다.

👉 Presentational and Container Pattern

이 패턴은 알고보니 Redux에서 자주 사용되는 유명한 패턴이였다. 이 패턴을 쓰게 되면 가독성이 정말 좋아지는데 그 이유가 바로 데이터를 다루는 부분(Container)과 화면을 표현하는 부분(Presentational)으로 나누어서 개발을 하기 때문이다

오늘 실제로 다뤄보고 결과를 보니 정말 보기가 편안했다. 만약 화면을 표현하는 부분(UI)를 수정하고 싶으면 presenter 파일로 가면 되고, 데이터 요청이나 관련 코드를 구현하거나, 수정하고 싶다면 Container파일로 가면 된다. 그렇기 때문에 유지, 보수 측면에서도 정말 편리할 것 같다!

👉 useSelector, useDispatch

useSelector

useSelector는 컴포넌트와 State를 연결하는 역할을 한다.

컴포넌트에서 useSelecotor 메소드를 통해 store의 state에 접근을 할 수 있었다.

import { useSelector } from 'react-redux';

const state = useSelector(state => state.itemReducer);

이런식으로 state에 접근할 수 있었는데, 이런 이유때문인지 정말 복잡하지 않고 쉽게할 수 있었던 것 같다.

useDispatch

useDispatch는 Action 객체를 Reducer로 전달해주는 메소드이다. 그렇기 때문에 먼저 Action을 만들어 놓고 그 다음 useDispatch 메소드를 사용했다.

// actions.js

// --- Action 객체 ---
export const setQuantity = (itemId, quantity) => {
  return {
    type: SET_QUANTITY,
    payload: {
      itemId,
      quantity
    }
  }
}

// Container.js
import { useDispatch, useSelector } from 'react-redux'

const dispatch = useDispatch();

// --- Aciton객체를 Reducer로 전달 ---
const handleQuantityChange = (quantity, itemId) => {
    dispatch(setQuantity(itemId, quantity))
}

🙌 느낀점

오늘 배운 Redux도 어느정도 짜여진 틀에서 코드를 채워넣는 구조였다. 그렇기 때문에 완전히 내 코드라고는 할 수 가없다. 과제는 정말 빨리 끝냈지만 Redux뿐만 아니라 Redux-saga와 Redux-thunk를 더 공부해야 할 필요가 있다.

오늘 아침에 못풀었던 Toy 알고리즘을 마저 다시 풀고, Redux 공부를 하고, 노마드코더 리액트 챌린지 과제를 하면 오늘 하루도 끝이다~!!!

👊 내일의 TIW(today I Will)

Redux

← Previous Post Next Post →