Array, Object State 변경하기

복사, 수정, 적용

array나 Object로 된 state를 변경할 때는

기존 state를 copy하여 수정 한 후 setState 해줘야 한다.

let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']);

 <button onClick={ ()=>{
    let copy = [...title];
    copy[0] = '여자코트 추천';
    setTitle(copy);
} }>글 수정</button>

 

---

 

setState(변경할 값) 함수의 동작 특징

기존 state와 변경될 state를 비교 후 다를때에만 state 변경을 해준다.

 

array, object의 특징

JavaScript에서 array와 object가 담겨있는 변수에는 해당 값이 저장되는것이 아니라,

해당값이 저장되어 있는 공간에 화살표만 저장된다.

state변경 시, array나 object의 값만 변경하는게 아니라, 새로운 array나 object를 생성하여 변경 후 적용시켜줘야 한다.

 

그래서 아래와 같이 작성하면 제대로 동작하지 않는다.

let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']);

 <button onClick={ ()=>{
    title[0] = '여자코트 추천';
    setTitle(title);
} }>글 수정</button>


// 단순 복사의 경우 화살표만 복사되어 copy본과 원본이 동일하다.
let copy = title; 		// 단순 복사 할 경우 화살표만 복사된다.
copy[0] = '여자코트 추천';
console.log( copy == title );	// true가 나온다.


// [...title] 로 Deep copy해야 한다.
let copy2 = [...title];		// 이렇게 복사해야 한다. (괄호를 벗긴 후 새로운 array를 만든다. 화살표가 달라짐)
copy2[0] = '여자코트 추천';
console.log( copy2 == title );	// false

 

 

---

Array state 를 정렬 해보자!

function App(){

    let [title, setTitle] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  

    return (
        <button onClick={ ()=>{ 
            let copy = [...title];
            copy.sort();
            letTitle(copy)
        } }>정렬하기</button>
    )
}