배열 state가 업데이트 되었음에도 re-rendering되지 않는 경우

export default App() {
    const [arr, setArr] = useState([1,2,3]);
    const deleteSam = (e) => {
        const temp = arr;
        temp.splice(2,1);
        setArr(temp);
    };

    return (
        <div>
            <ul>
            { arr.map( (item, index) => <li key={index}>{item}</li> ) }
            </ul>

            <button onClick={ deleteSam }>버튼버튼</button>
        </div>
    );
}

함수 deleteSam에서 arr의 값을 새로운 변수에 담고, 배열을 가공하고, 가공된 결과를 arr state에 업데이트 시켜주고 있는 것같다. 그러나 리렌더링이 되지 않는다.

 

이유는 별다른것이 아니라, 실제로 set__ 구문으로 state가 바뀌지 않았으므로 렌더링되지 않는 것이다. 배열은 얕은 복사가 되므로, temp에 실제로 들어가있는 값은 [1,2,3]이 아니라 참조값이다. 

temp.splice(2,1); 

부분에서 이미 arr는 리렌더링 없이 값이 업데이트 되었고, setArr(temp)는 setArr(arr)과 별반 차이없는 구문이다. 값이 바뀌지 않았으니 리렌더링도 없다.

---

해결은 스프레드 연산자 내지는 filter함수로 다소 답답하게 가능하다. 

velopert.com/3638

누구든지 하는 리액트 8편: 배열 다루기 (2) 제거와 수정 | VELOPERT.LOG

이게 싫다면 갖은 더러운방법으로 강제 리렌더링을 하든지, 깊은복사를 무겁게 돌리든지 하여 해결하면 되겠다.