리덕스 다시 알아보자!

lionloopy·2024년 11월 21일

오늘의 공부

목록 보기

5/22

서론

리덕스를 배웠고, 사용하며 경험했지만
이번 개발 때 사용하면서 많이 부족하다고 느꼈다..! 뭔가 엉성한 느낌..?
그래서 리덕스를 다시 알아보려고 한다!

리덕스란

여러 컴포넌트가 공유하는 상태를 관리하기 위한 라이브러리
리액트 컨텍스트에 기반을 둔 라이브러리로, provider 컴포넌트가 항상 최상위로 동작해야한다

상태 예측
유지 보수가 편리함
디버깅
-> 어떤 액션이 일어나고, 상태의 변화가 모두 로그에 남는다
스토어로 전역 상태 관리

리덕스 사용

provider 컴포넌트를 적용한다.
-> provider는 필수적으로 store를 지정해줘야 한다.

const store = configureStore({ reducer: myReducer });
  return (
    <Provider store={store}>
      <main>
	  {/* 컴포넌트 추가*/}
      </main>
    </Provider>

reducer, type state, action을 만든다
-> store는 내 상태 정보를 저장하고, 새 상태를 반환하는 함수인 리듀서를 사용한다.
-> 즉, 전역적으로 상태를 관리할 컨테이너인 store을 만들고, store에 관리할 상태 테이터 타입을 선언하고, 상태 데이터를 새로 바꾸기 위한 리듀서를 만들어야 한다.
-> 리듀서는 state와 action을 변수로 받아 새로운 state를 반환한다.

useSelector: 데이터 읽기. store에 저장된 내용을 read하기 위해서 사용한다.
dispatch: 데이터 수정. state값을 변경하기 위해 사용한다.
스토어: 컴포넌트와는 별개로 스토어라는 공간 안에 필요한 상태를 담는다.
컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.
액션: 앱에서 스토어에 운반할 데이터를 말한다. (like 주문서)
리듀서: 액션을 스토어에 바로 전달하는 것이 아닌, 리듀서에 전달한다. 리듀서가 주문서를 보고 스토어의 상태를 업데이트 한다. 액션을 리듀서에 전달하기 위해 사용하는 것이 dispatch() 메소드!

action이 dispatch() 메소드에 전달된다 -> dispatch(액션)을 통해 reducer를 호출한다 -> reducer는 새로운 store를 생성한다.

리듀서
const reducer = (state = initState, action) => {
	switch(action.type) {
      case ONCLICK:
        return {
          /* counter값 그대로, ONCLICK시 토글만 변경 */
          ...state,
          toggle: !state.toggle
        };
      case INCREASE:
        return {
          /* toggle값 그대로, INCREASE시 diff값 추가 */
          ...state,
          counter: state.counter + action.diff
        };
      case DECREASE:
        return {
          /* toggle값 그대로, DECREASE시 counter - 1 */
          ...state,
          counter: state.counter - 1
        };
      default:
        /* 해당하지 않으면 아무 동작도 수행하지 않음 */
        return state;
    }
}