react 상태관리 주의사항

jimmy neutron·2022년 12월 13일
0

리액트로 코드를 작성하다보면 이런 상황이 자주 발생한다.

// 부모 컴포넌트에서 props를 이런식으로 주고있음
<Thead studs={studs} setStuds={setStuds} />

const Thead = ({ studs, setStuds }) => {
  let tempStuds = studs.slice();
  const sortByKey = (key) => {
    switch (key) {
      case "age":
        tempStuds.sort((a, b) => a.age - b.age);
        break;
      case "reg":
        tempStuds.sort((a, b) => (a.enrolled < b.enrolled ? -1 : 1));
        break;
      case "score":
        tempStuds.sort((a, b) => a.score - b.score);
        break;
    }

    setStuds((prev) => tempStuds);
  };
  return (
    <thead>
      <tr>
        <th onClick={() => sortByKey("age")}>나이</th>
        <th onClick={() => sortByKey("reg")}>등록</th>
        <th onClick={() => sortByKey("score")}>점수</th>
      </tr>
    </thead>
  );
};

이 상황에서 studs를 바로 쓰면 안되고 tempStuds에 깊은 복사를 한 후 사용을 해야한다.
너무 당연한 내용이지만 빠르게 코드를 짜다보면

let tempStuds = studs;

이렇게 얕은 복사로 만들어놓고 코드를 짤 때가 있다. 이렇게 되면 tempStuds가 변할 때 studs값도 같이 변해서 setStuds(tempStuds)를 했을 때 리액트는 studs값이 아무런 변화가 없다고 인지해버려서 리렌더링이 일어나지 않는다.
주의하자!

profile
프론트엔드로 지구정복

0개의 댓글