[🌪 Error Handling] 유스 스테이트 값의 변경됨 / 2021-09-17

[Oh-Myeongjae]

어떤 에러인가요?

• 유스 스테이트 값을 slice로 스테이트 복사한다음 데이터 핸들링후 복사한 값을 set함수를 이용해 변경을 하였는데

원하는 부분뿐 만 아니라 다른부분에도 영향을 주는 에러가 발생!!

에러 메시지

에러 핸들링 방법

• 배열이 값인 스테이트를 slice로 복사하여 데이터 핸들링한다고 하여도 slice자체가 얇은 복사가 되기 때문에

배열자체는 새로운 배열로 복사가 되어도 안쪽의 객체는 원본의 데이터와 같은 객체의 참조값을 참조하므로 문제가 되었던 것이다.
(배열([])과 객체({}), 함수(function(){})은 참조자료형이므로 객체의 주소값을 저장!! 객체의 데이터 그자체를 가르키는것을 아님)

이를 해결하기 위해서 유스 스테이트 배열자체를 slice로 복사하지 말고

깊은복사를 이용하여 핸들링 하면 기존의 배열에 영향을 주지않고 핸들링 하여 사용가능하다.

const [menuArr, setMenuArr] = useState([]);

const copyArr = JSON.parse(JSON.stringify(menuArr));----------(0,깊은복사)

const copyArr = menuArr.slice();----------(X,얕은복사)

에러 핸들링을 위해 참고한 레퍼런스 링크

참고링크