To Do List⚡

• redux, redux-saga 공부
• I18N 조사
• storybook 조사
• 코드 리팩토링

Today was...🎯

React-Redux 기초 공부

• action

  • 상태에 변화 필요할 때, 우리는 액션을 발생시킴

  • 액션은 하나의 객체로 표현되며, type 필드를 필수적으로 가지고 있어야 함

  • 그 외 값들은 커스텀 가능

    {
      type: "ADD_TODO",
      data: {
        id: 0,
        text: "리덕스 배우기"
      }
    }

• action creator

  • 액션을 만드는 함수

  • 컴포넌트에서 쉽게 액션을 발생시키기 위함

  • 단순하게 파라미터 받아와서 액션 객체 형태로 만들어줌(return)

    export function addTodo(data) {
      return {
        type: "ADD_TODO",
        data
      };
    }
    
    // 화살표 함수로도 만들 수 있습니다.
    export const changeInput = text => ({ 
      type: "CHANGE_INPUT",
      text
    });

• reducer

  • 변화를 일으키는 함수

  • 두 개의 파라미터 state, action을 받음

    function reducer(state, action) {
      // 상태 업데이트 로직
      return alteredState;
    }
    
    // 예시
    function counter(state, action) {
      switch (action.type) {
        case 'INCREASE':
          return state + 1;
        case 'DECREASE':
          return state - 1;
        default:
          return state;
      }
    }

  • 현재 상태와 전달 받은 액션을 토대로 새로운 상태를 반환

• store
  • 앱 내에서 관리되는 모든 상태를 저장
• dispatch
  • 스토어 내장 함수 중 하나
  • 액션을 발생시키는 것
  • action을 파라미터로 전달 (dispatch(action))
  • 호출하면 스토어에서 리듀서 함수 실행시켜 해당 액션 처리 로직이 있다면 액션을 참고하여 새로운 상태를 만듦
• redux-saga를 사용한 API 호출 시 변수 삽입하는 법
  

참고

• 리덕스는 늘 어렵고 복잡하다. 거기에 redux-saga까지 끼얹는다? 이건 못 참지... vscode가 못 참고 에러를 무한히 뱉어냈다...😂 한 곳 고치면 다른 한 곳에서 터지고... 난리도 아니었다. 오늘은 지금까지 한번도 제대로 써보지 못한 TypeScript + Redux + Redux-saga의 조합을 공부하고 시도해보며 시간을 보냈다. 결국 근무 시간 내에 다 해결하지 못한 채로 귀가하게 되었지만, 이 글을 쓰고 있는 새벽 세시 반까지 붙잡고 있어보니, 정말 놀랍게도 원하는 대로 작성하는 코드를 완성해낼 수 있었다! 너무나도 행복했다...이 맛에 코딩한다😂

• 하지만 아직도 정확한 원리를 속속들이 파악하고 있지는 않아, 출근해서 더 공부하고, 주석까지 달아서 push 해야겠다. 어쩌다보니 한 PR에 엄청 많은 task를 달아서 병합하게 되었는데, 얼른 마무리해서 새로운 브랜치에서 새로운 Issue로 개발하고 싶다.