23/11/8

Laejun Kim·2023년 11월 8일

TIL

목록 보기

31/89

React

Redux

초기설정

yarn add redux react-redux 명령어로 설치(redux와 react-redux 두가지를 설치해야 한다)
configStore.js 생성

import { createStore } from "redux";
import { combineReducers } from "redux";

const rootReducer = combineReducers({});
const store = createStore(rootReducer);

export default store

이후 index.js에서 을 로 감싸주는 것으로 초기설정이 완료된다.

  <Provider store={store}>
  <App />
</Provider>

당연히 index.js에서 store를 import해와야 한다.

사용법

시작하기

첫 모듈을 만들어 보자.

// 초기 상태값 (state)
const initialState = {
number: 0,
};

// 리듀서 : 함수
// input : state와 action 이 두가지를 받음
const counter = (state = initialState, action) => {
switch (action.type) {
  case "PLUS_ONE":
    return {
      number: state.number + 1,
    };
  default:
    return state;
}
};

export default counter;

initialState는 말그대로 초기값. useState에서 괄호 안에 넣어주었던 값과 같다고 생각하면 된다.

리듀서는 함수다. 스테이트의 변화를 일으키는 함수. state를 action의 type에 따라 변경시킨다. 여기서 export 한 리듀서(예시에서는 counter)를 처음에 만든 rootReducer 안에 넣어줘야한다.

우선은 +1하는 기능을 넣어보자. 리듀서에서는 action의 type에 따라 어떤 행동을 할지 정해야 한다. 위 예시에서는 action type이 “PLUS_ONE”일 때 state의 number에 +1 한걸 number에 지정하는 객체를 반환하고 있다. 그렇게 넣어주고 나면 어플리케이션 전체에서 해당 리듀서를 사용할 수 있게 된다.

이제 중앙 저장소에서 데이터에 접근해서 읽어오는걸 생각해보자.

function App() {
//여기서 store에 접근하여, counter의 값을 읽어오고 싶다!
// useSelector
const data = useSelector((state) => {
  return state;
});

console.log(data);
return <div className="App">Redux</div>;
}

export default App;

위처럼 useSelector 를 이용해서 접근한다. state로 접근하면 중앙저장소에 있는 모든 state에 접근할수 있고, state.counter 나 state.users 등으로 개별 state에 접근할 수 도 있다.

데이터 변경하기

데이터를 변경하는건 리듀서의 역할이라고 언급한바 있다. 리듀서를 적용하는건 ‘디스패치’라는 녀석이 한다. 먼저 디스패치를 가져와야한다. 컴포넌트 내의 js 코드 쓰는 부분에서 useDispatch()로 가져온 다음에 onClick 이벤트에서 dispatch 를 불러오면 된다. 불러온 디스패치에는 객체를 전달하는데 해당 객체 안에는 type을 명시해준다. +1 버튼이니 type을 “PLUS_ONE”으로 해주면 된다.

  function App() {
  //여기서 store에 접근하여, counter의 값을 읽어오고 싶다!
  // useSelector
  const counter = useSelector((state) => {
    return state.counter;
  });
  //dispatch 가져오기
  const dispatch = useDispatch();
  console.log(counter);
  return (
    <>
      <div>현재카운트 : {counter.number}</div>
      <button
        onClick={() => {
          dispatch({ type: "PLUS_ONE" });
        }}
      >
        +
      </button>
    </>
  );
}

export default App;

위 예시처럼 해도 되지만 액션 객체를 매번 만드는 것도 번거롭기 때문에 이걸 위한 함수를 따로 만드는 것도 방법이다.

const PLUS_ONE = "counter/PLUS_ONE";
const MINUS_ONE = "counter/MINUS_ONE";

//action creator : action value 를 return 하는 함수
export const plusOne = () => {
return {
  type: PLUS_ONE,
};
};
export const minusOne = () => {
return {
  type: MINUS_ONE,
};
};

이런식으로 액션객체를 리턴하는 함수를 만들고 그 함수를 export해서 필요한 곳에서 사용할 수 있다.

 <button
      onClick={() => {
        dispatch(minusOne());
      }}
    > 빼기 </button>

페이로드(payload)

추가정보 정도로 이해하면 된다. 액션 객체에 type과 함께 저장해서 사용할 수 있으며 반드시 들어가야 하는 것은 아니고 필요에 따라 넣으면 된다.

페이로드까지 들어간 액션 생성 함수의 예시는 아래와 같다.

export const minusN = (payload) => {
  return {
    type: MINUS_N,
    payload: payload,
  };
};

이런식으로 액션 객체에 들어간 payload는 리듀서 함수에서 아래와 같은 식으로 사용이 가능하다.

const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE:
      return {
        number: state.number + 1,
      };
    case MINUS_ONE:
      return {
        number: state.number - 1,
      };
    case PLUS_N:
      return { number: state.number + action.payload };
    case MINUS_N:
      return { number: state.number - action.payload };
    default:
      return state;
  }
};