리액트로 코드를 작성하다보면 이런 상황이 자주 발생한다.
// 부모 컴포넌트에서 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값이 아무런 변화가 없다고 인지해버려서 리렌더링이 일어나지 않는다.
주의하자!