부트캠프 50, 51일차 (Redux)

오늘의 생각

Redux가 바라본 어제의 나

이전에 리액트를 혼자 독학했을 때, Redux의 존재를 알게 됐다.

 

Redux가 무엇인지 정확히 알지 못했지만, 그래도 리액트를 개발할 때 필요로 하는 존재임은 인지하고 있었기 때문에 드디어 Redux를 배운다는 사실에 마음이 설레였다.

 

막상 배워보니 꽤 복잡했다.

 

이전 과제를 통해 상태 관리 라이브러리의 필요성을 인지하고 있었고, Redux가 상태 관리 라이브러리의 종류 중 하나라고 알고 있었다. 하지만 실제고 배워보니 꽤 복잡했다. 먼저 상태 변경 이벤트 발생 후 Redux에서의 데이터의 흐름이 잘 이해되지 않았다. 기본적인 개념이기 때문에 반드시 숙지하고 있어야 했는데, 막상 과제를 진행하기 전에는 그 중요성을 잘 인지하고 있지 못했던 것 같다.

 

과제를 진행할 때 아쉬웠던 점은, 새로운 개념을 배울 때 과제 진행 전에 시간 여유가 있었음에도 좀 더 찾아보지 않아 준비가 덜 됐다는 점이었다.

 

Action 값에 따라 상태를 변경시키는 Reducer 함수가 왜 순수함수여야 하는지, 그리고 어떻게 Reducer 함수를 통해 action에 따른 데이터 변환을 일으킬 수 있는지를 명확하게 이해하지 못했었던 것 같다. 개인적으로 안 좋은 버릇이라고 생각하기 때문에 더 고치기 위해 노력해야겠다고 다짐했다.

 

과제 자체는 매우 쉬웠는데, 왜 코드스테이츠에서 긴 시간적 여유를 줬는지 이해할 수 있는 과제였다. 

 

그래도 기존의 실습을 성실히 해온 결과를 바탕으로 페어 과제는 조금 어렵게나마 해결할 수 있었다. 

 

// ...생략

const itemReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TO_CART:
      // 기존 코드
      return Object.assign({}, state, {
        cartItems: [...state.cartItems, action.payload],
      });
      
      // 더 나은 해결 방법(레퍼런스)
      return {
        ...state,
        cartItems: [...state.cartItems, action.payload],
      };

      // ... 생략
     }
}

 

특히 이전 페어 과제는 레퍼런스에 비해 매우 비효율적이라고 생각되는 방식으로 코드를 작성했는데, 이번 과제의 경우 Object.assign을 활용해 조금은 비효율적이더라도 레퍼런스 코드와 크게 다르지 않은 방식으로 과제를 해결했기 때문에 코드스테이츠의 의도를 정확히 이해한 것 같아 뿌듯했다. 

 

---

오늘의 키워드

Redux, Action 객체, Dispatch 함수, Reducer 함수, Store, Redux Hooks(useDispatch, useSelector)

 

---

오늘의 학습내용

• Redux의 작동 원리 (데이터 흐름)
• Store의 정의 및 사용법
• Reducer 함수의 역할과 순수함수여야 하는 이유 
• Action 객체의 역할과 액션 생성자(Action Creator)를 사용한 type과 payload의 정의
• Dispatch 함수의 정의 및 사용법
• Redux Hook의 종류와 각 hook의 역할
• Redux의 세 가지 원칙 (Single source of truth, State is read-only, Changes are made with pure functions)

---

어려웠던 keyword / 활용한 질문

 

Q. Redux의 작동 원리를 설명해보세요.

 

A. Store를 통해 관리되는 상태(State)가 변경되어야 하는 이벤트가 발생되면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다. Action 객체는 Dispatch 함수의 인자로 전달되며, Dispatch 함수는 Action 객체를 Reducer 함수로 전달합니다. Reducer 함수는 Action 객체의 값을 확인하고 ,그 값에 따라 전역 상태 저장소 store의 상태를 변경합니다. 상태가 변경되었으므로 리액트는 화면을 다시 렌더링하게 됩니다.

 

Q.  Redux의 세 가지 원칙을 Redux의 요소들과 연관지어 설명하실 수 있나요?

 

A. 첫 번째 원칙인 신뢰할 수 있는 단일 출처의 원칙은 Store라는 단 하나뿐인 공간과 연결이 되는 원칙입니다. 두 번째 원칙인 상태는 읽기 전용 원칙의 경우 Action 객체가 있어야만 상태를 변경할 수 있음을 의미합니다. 세 번째 원칙인 변경은 순수함수로만 가능하다는 원칙을 지키기 위해서 Reducer를 통해 순수함수로 작성되어야 함을 말하고 있습니다.