useState batching & action creator & reducer

 

배칭(batching)이란?

리액트에서 setState를 사용하여 상태를 업데이트할 경우, setState는 비동기적으로 작동하기 때문에 업데이트 된 상태에서 바로 반영되지 않는다.

즉, 리렌더링이 된 후에서야 state가 반영된다.

 

batching은 리액트 버전이 18로 업데이트 되면서부터 상태 업데이트(setState)를 하나도 통합하여 배치처리를 한 후 리렌더링이 진행되도록 만들어졌다.

배칭은 React가 더 나은 성능을 위해 여러 개의 state 업데이트를 하나의 리렌더링(re-render)으로 묶는 것을 의미한다. 

React에서 setState를 사용하여 상태를 업데이트할 경우, 업데이트된 상태는 비동기적 특성 때문에 즉시 반영되지 않는다고 한다. setState는 요청에 따라 바로 리랜더링이 되는것이 아니라 변경 사항을 모아서 가장 최신의 결과를 렌더링해내게 된다.

 

이러한 비동기적인 방법을 해결하기 위해서는 함수형 업데이트를 사용하면 된다.

함수형 업데이트는 값을 자체를 전달하는 것이 아닌 업데이트된 최신의 state와 함께 함수를 전달한다(콜백함수).

이 경우 리액트는 setState()의 변경 내용을 합치는 것이 아니라, 하나의 큐(queue)에 setState()를 올리고 이것들이 호출된 순서에 따라 state를 변경한다.

 

 

큐의 개념과 연산

 

action creator를 사용해야하는 이유

 

const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";

export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

export const minusOne = () => {
  return {
    type: MINUS_ONE,
  };
};

 

 

1. 오타같은 휴먼에러를 방지할 수 있다.

 

액션객체를 상수로 만들어서 사용하면 개발툴에서 관련 내용을 자동완성보조기능을 지원받을 수 있다.

 

 

 

2. 유지보수기능의 효율성이 굉장히 증가한다.

 

액션객체를 한 곳이 아닌 여러 곳에서 사용하는 경우 action creator만 변경하면 모든 수정사항을 변경할 수 있다.

 

 

3. 코드 가독성이 높아진다.

 

action creator가 잘 정리되어 있을 경우, 다른 개발자가 참고하기 용이하여 action들의 리스트업을 해주는 일종의 문서역할을 하게 된다.

 

 

<div>
    <button onClick={() => dispatch({ type: "PLUS_ONE" })}>+1</button>
    <button onClick={() => dispatch({ type: "MINUS_ONE" })}>-1</button>
    {num}
</div>

 

• action 객체란 반드시 type이라는 key를 가져야 하는 객체이자 reducer로 보낼 명령이다. 
• dispatch란 action 객체를 reducer로 보내는 전달자 함수이다 
• dispatch는 스토어의 내장함수이며 type은 대문자로 작성하여야 한다. 

 

const initialState = {
  number: 0, //리덕스에 있는 state값이 변경되면 useSelector을 하고 있는 컴포넌트에 리렌더링이 일어남
};

const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다.
      return {
        number: state.number + 1,
      };
    case MINUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다.
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

export default counter;

 

• reducer는 dispatch를 통해 전달받은 action 객체를 검사하고 조건이 일치했을 때 새로운 함수를 만들어내는 함수이다.