[React] Array와 Object 다루기

state에는 배열이나 객체도 넣어 업데이트 시킬 수 있습니다.

하지만, array나 obejct를 다룰때 주의해야할 점이있는데,

원본을 변형하면 안된다는 점입니다. 그렇다면 Array나 Object의 원본을 바꾸지 않으면서 어떻게 조작해야하는지 공부해보겠습니다.

 

 

./문법정의 &기본형식

 

자바스크립트에는 전개구문이라는 문법이 있습니다.

배열의 괄호를 잠깐 없애달라는 문법인데요.

 

문법은  배열일경우 [...배열명]을 사용하고 객체일경우 {...객체명}을 사용합니다.

 

/예제

 

 

title을 배열명으로 변경하고 제일 아래에 정렬이라는 버튼을 하나 만들어 줬습니다.

 

버튼을 누르면 A B C 순으로 정렬시켜주려합니다.

 

먼저 button에 클릭 이벤트를 달고 함수를 넣어주면 되겠죠?

 

 

이제 함수를 가져와서 정렬기능을 해주는 sort함수를 사용해서

정렬함수( https://mtm1018.tistory.com/4  )

 

 

정렬을 시켜주면 될텐데 원본을 변경하면 나중에 원본 데이터를 쓸일 있을 때 곤란하겠죠?

 

때문에 배열의 괄호를 전개구문으로 벗겨놓고 벗겨놓은 배열을 복사하여 그 복사된 배열을 정렬시켜주면 됩니다.

 

 

 

 

/요약

 

- 리액트에서도 배열과 객체를 다룰때는 원본데이터는 보존해 두어야합니다

 

-  배열과 객체데이터의 원본을 보조할 때는 전개구문을 사용해 모든 데이터를 펼쳐두고 그것을 변수를 통해 따로 복사해두는게 좋습니다.