array/object 다룰 때 원본은 보존하는게 좋다. 나중에 필요할 수도 있기 때문에
즉, 무조건 복사본을 만들고 복사본을 고치자!!//글제목이라는 list변수를 copy라는 변수에 복사한다. let copy = [...글제목] //그리고 우리는 copy라는 복사한 list의 0번째에 '여자 코트 추천'을 넣는다. copy[0] = '여자 코트 추천'; //그리고나서 수정한 list변수인 copy를 state 변경함수인 글제목변경에 넣어주면 원래 있던 제목 list를 바꿀 수 있다!! 글제목변경(copy);
state변경함수 특징
기존state == 신규 state의 경우 변경 안해줌 (자원절약차원)
array/object 특징
array/object 담은 변수엔 화살표만 저장됨
//[1,2,3]이 어딨는지 알려주는 화살표만 들어있음!!(RAM에 저장되어 있고, arr는 가리키기만 한다.) let arr = [1,2,3];이 때, array를 수정하면 변수에 있던 화살표는 수정이 안된다. 그래서 array만 수정하면 내가 원하던 값으로 변경이 안된다. 왜냐하면 컴퓨터는 기존state와 신규state가 같다고 생각하기 때문에.
즉, 변수1 & 변수2의 주소값이 같으면 변수1==변수2 비교하면 true.
array/object가 이렇게 주소값을 가지면서 복사를 해도 변경이 안되는 이유는 reference data type이라서 그렇다.
그래서 [...변수]를 쓰면 아예 다른 주소값을 가지기 때문에 이제야 state가 수정이 된다.
state를 변경하고 싶을 때
- state가 string이나 number 이면 그냥 수정하면 바뀐다.
- state가 array나 object 이면 그냥 수정하면 가리키는 주소가 같고, 주소값이 동일하므로 수정이 안된다. 그러므로 독립적인 카피본을 만들어서 수정해야 한다. 이 때, 독립적인 카피본을 만드는 방법이 바로 [...변수] 이다!!!!!!!!!![...변수]는 " 화살표를 새로 바꿔주세요~ 그리고 원래 괄호를 벗겨주고 다시 괄호를 씌워주세요~~" 라는 뜻. 그러므로 완전히 새로운 state, 완전히 새로운 주소를 가진다.
<button onClick={()=>{
let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy);
}}>글수정</button>버튼 누르면 가나다순 정렬
1.
<button onClick={()=>{
let copy = [...글제목];
글제목변경(copy.sort()); //copy.sort();랑 글제목변경(copy)를 한 줄에 해버림
}}>가나다순정렬</button>
2.
<button onClick={()=>{
let copy = [...글제목];
copy.sort();
글제목변경(copy);
}}>가나다순정렬</button>