React array state가 갱신되어도 view가 바뀌지 않을 때

React array state가 갱신되어도 view가 바뀌지 않을 때

const [members, setMembers] = useState<Array<string>>([]);

const deleteMember = (index: number) => {
    // member 삭제
    const tmp = members;
    tmp.splice(index, 1);
    setMembers(tmp);
}

return(
    <>
    {
        members.map((member: string, index: number) =>
        <Grid key={member}>{member}</Grid>
    }
       </>
);

members라는 Array state의 값 하나를 삭제하는 함수이다. 해당 함수를 실행해도 표시되는 학생이 변하지 않는 이슈가 발생했다. 하지만 개발자도구를 통해서 보면 분명 해당 컴포넌트의 members State는 변경되어있다. 이게 어떻게 된 일일까?

 

React 렌더링

React는 Virtual DOM을 그리며 해당 트리가 변했는지 판단을 하기 위해 Reconciliation을 한다.

그 과정 중 state와 props가 같은지 비교하기 위해서는 Object.is 알고리즘을 사용하는데 해당 알고리즘에서 객체는 주소값으로 비교된다.

const deleteMember = (index: number) => {
    // member 삭제
    const tmp = members;
    tmp.splice(index, 1);
    console.log(Object.is(tmp, members)); // true
    setMembers(tmp); // rerendering x
}

 

위의 함수를 이렇게 바꾸어서 Obejct.is 값을 출력해보면 같은 객체이기 때문에 true가 return 되어 setMembers로 state를 갱신해도 갱신되었다는 걸 인식하지 못하여 리렌더링되지 않는다.

 

얕은 복사

const deleteMember = (index: number) => {
    // member 삭제
    const tmp = [...members];
    // const tmp = members.slice(0); 도 괜찮다.
    // const tmp = Object.assign([], members); 도 괜찮다.
    tmp.splice(index, 1);
    console.log(Object.is(tmp, members)); // false
    setMembers(tmp); // rerendering o
}

따라서 이렇게 요소 하나하나를 복사하여 새로운 객체를 만들어 Object.is 알고리즘이 false가 나게 만들어야 해당 state에 의해 Virtual DOM의 해당 부분이 리렌더링된다.