미라클 메모리

목차

리덕스를 왜 사용해야 하는걸까?

• 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.
• 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다.
• 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다.
• 상태 업데이트 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는데 도움이 된다.
• 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며, 실제 업데이트가 필요한 컴포넌트만 리렌더링 되도록 쉽게 최적화해 줄 수 있다.

리덕스 이해하기 - Action

<aside> 💡 상태에 어떤 변화가 필요하면 Action 이라는 것이 발생한다.

</aside>

function foo(data) {
    return {
      type: "DELETE_TODO",
      data,
    };
  }
// 화살표 함수 Case
  const bar = (text) => ({
    type: "CHANGE_TEXT",
    text,
  });

리덕스 이해하기 - Reudcer

<aside> 💡 리듀서는 변화를 일으키는 함수다. 액션을 만들어서 발생시키면 리듀서가 현재 상태화 전달받은 액션 객체를 파라미터로 받아온다. 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해 준다.

</aside>

const 초기값 = {
    counter: 1,
  };

  function reducer(state = 초기값, action) {
    switch (action.type) {
      case "INCREASE":
        return {
          counter: state.counter + 1,
        };
      default:
        return state;
    }
  }

리덕스 이해하기 - store

<aside> 💡 프로젝트에 리덕스를 적용하기 위해 스토어를 만든다. 한 개의 프로젝트에는 단 하나의 스토어만을 가질 수 있다.

</aside>

리덕스 이해하기 - dispatch

<aside> 💡 dispatch는 액션을 발생시는 것이다. dispatch(action)과 같은 방식으로 액션 객체를 파라미터로 넣어서 호출한다. 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어준다.

</aside>

리덕스 이해하기 - 구독