[React] Array,object state 조작법

​

이번에 프리미어리그 공동득점왕을 수상한 '살라'와 '손흥민'을

배열로 저장해

state로 조작해보겠다.

let [Top_player, setplayer] = useState(['살라', '손흥민']);

버튼을 만든 후

 

 

        <button className="change_btn" onClick={()=>{
          let copy = [...Top_player]
          copy[0] = copy[1]
          setplayer(copy)
        }}>눌러봐</button>

버튼 속성으로 onClick속성을 넣고

화살표 함수안에 지역변수로 배열을 새로 복사해준다

​

기존의 배열을 그대로 사용하지않고 따로 복사하는 습관을 들이는게 좋다

원본을 해치지 않기 때문

​

그리고

 

 

let copy = [...Top_player]

여기서 [... a] 은 스프레드 연산자로

쉽게 메모리의 주소값을 복사하는게 아니라

새로운 값을 복사해줄 수 있기 때문에

이렇게 사용하는게 합당하다.

​

만약 스프레드 연산자를 사용하지않는다면?

 

        <button className="change_btn" onClick={()=>{
          let copy = [Top_player]
          copy[0] = copy[1]
          setplayer(copy)
        }}>눌러봐</button>

​

안된다 ..

​

스프레드 연산자를 사용하자!