미라클 메모리

목차

Home 컴포넌트 구조

현재 컴포넌트의 구조이다. Home컴포넌트에는 이런 상태값이 있다. 현재 날짜를 반환하는 상태값이다.

const [curDate, setCurDate] = useState(new Date());

해당 상태값은 increaseMonth decreaseMonth 함수에 의해서 상태값이 변경된다.

const increaseMonth = () => {
    setCurDate(
      new Date(curDate.getFullYear(), curDate.getMonth() + 1, curDate.getDate())
    );
  };

  const decreaseMonth = () => {
    setCurDate(
      new Date(curDate.getFullYear(), curDate.getMonth() - 1, curDate.getDate())
    );
  };

MyHeader에 전달한 MyButton에서 click이벤트가 발생하면 위에서 언급한 함수가 실행이되며 Home 컴포넌트 전체가 렌더링이 되는 상황이 발생한다.

<MyHeader
        headText={headText}
        leftChild={
          <MyButton
            text={"<"}
            onClick={() => {
              decreaseMonth();
            }}
          />
        }
        rightChild={
          <MyButton
            text={">"}
            onClick={() => {
              increaseMonth();
            }}
          />
        }
      />

ControlMenu 최적화하기

const ControlMenu = React.memo(({ value, onChange, optionList }) => {
  return (
    <select
      className="ControlMenu"
      value={value}
      onChange={(e) => onChange(e.target.value)}
    >
      {optionList &&
        optionList.map((it, idx) => (
          <option key={idx} value={it.value}>
            {it.name}
          </option>
        ))}
    </select>
  );
});

ControlMenu는 이제 값이 변경되지 않는 이상 리-렌더링 되지 않는다. 하지만 의문점이 있다. 기존에는 onCreate 함수를 props로 전달했을 때, 즉, 참조타입을 prop를 전달했을 때 계속해서 주소값이 값지 않아 리-렌더링이 되는 오류가 되어있었다.

useState의 setState는 다르다

const [sortType, setSortType] = useState("latest");
...
<ControlMenu
	value={sortType}
	onChange={setSortType}
	optionList={sortOptionList}
/>

이번에도 역시 setSortType이라는 함수를 props로 넘겨주었다. 그러면 참조타입을 넘겨주었으니 해당값은 리-렌더링이 일어나지 않을까? 정답은 아니라는 것이다. useState로 넘겨준 배열의 두번째 인자 함수는 React.memo에서 리-렌더링의 대상이 되지 않는다. 하지만 이럴 경우는 다르다.

<aside> 💡 이미 useCallback 처리가 된 상태라고 이해하면 좋다.

</aside>

useState의 함수가 아니라면?