Error: You attempted to set the key `0` with the value `...` on an object that is meant to be immutable and has been frozen in React-Native

Error: You attempted to set the key `0` with the value `...` on an object that is meant to be immutable and has been frozen 에러가 난 화면

 

 

내 케이스는 React-hooks에서

1) useState를 사용하는데 초기 값이 String Array 로 들어있는 상태, 

2) 그 중에서 한 index를 splice로 지우고 (urls.splice(index, 1)) 다시 setUrls를 하는 상황에서 발생하였다. 

배열 splice를 해서 기존 배열의 index가 바뀌려하는 상황에 object가 immutable(변하지 않는 상태값)이라 값을 바꿀 수 없어 이런 에러가 생긴 모양이다. 

 

※ 참조
- immutable object : 생성 후 그 상태를 바꿀 수 없는 객체
- mutable object : immutable의 반대 개념으로 가변 객체로 생성 후에도 상태를 변경할 수 있다.

 

일반적으로 객체 지향 프로그래밍에서는 참조 형태로 객체를 전달하고 받는다. immutable은 객체를 복제할 때 단순히 참조만 복사하고 끝나며 메모리 절감 및 프로그램 성능에 좋다. immutable을 사용하면 성능 개선 및 데이터 복제나 비교에 조작을 단순화 할 수 있다. 하지만 가변 데이터가 많은 경우엔 immutable보다는 mutable을 사용하는 것이 적절할 수 있다. 

 

javascript slice 사용

그래서 Array를 mutable한 상태로 만들기 위해 배열의 시작과 끝까지 얕은 복사본(Shallow copy)를 만들어 새로운 배열 객체로 만들어준다. shallow copy를 만들기 위해 slice()를 사용해줘서 해결했다.