아래와 같은 state가 있다.
let [title, setTitle] = useState(['고라니 코트 추천', '고양이 코트 추천', '비둘기 코트 추천']);이걸 버튼을 누를때 값을 변경하려고 할때,
<button onClick={()=>{
setTitle(title[0] = '다람쥐 코트 추천');
}}이런 식으로 하면 이런식으로 변경이 된다.
왜냐하면 위에선 title[0]번째에 다람쥐코트추천을 할당한뒤, 그 값 자체를 title에 할당해버리기 때문에, 결국 index0 값이 전체를 덮어버린다.
setTitle('다람쥐 코트 추천');이거랑 같은 효과가 나는것이다.
정확하게 하려면
<button onClick={()=>{
setTitle(['고라니 코트 추천', '고양이 코트 추천', '비둘기 코트 추천']);
}}이렇게 변경 할것 안할것 전부다 할당해주어야 한다.
그러면 너무 힘드니 배열을 복사해서 해주면 편하다.
title[0]='다람쥐 코트 추천';
setTitle(title);이래도 가능은 하지만 배열 자체를 변경하기 보단, 복사후 변경해서 전체를 넣어주는게 관습이다.
원본 자체를 바꾼뒤, 원본 데이터가 필요한 경우 오류 발생 위험이 있기 때문에,
set으로 값을 변경하기 전에 원본 데이터를 보존하는 방향으로 해야 한다.
그러나 배열을 복사할때
let tempArray = title;
이렇게 하면 해당 주소값만 복사가 되어,
tempArray[0]의 값을 수정하면 title[0]의 값도 동시에 수정되기 때문에,
setTitle(tempArray)이렇게 했을때, tempArray와 title의 메모리 주소값이 동일하기 때문에
두개는 이미 동일하다고 판단하여 컴퓨터는 변경하지 않는다.
그래서 아래와 같이 깊은복사를 실행해서 변경해줘야 한다. 귀찮더라도.
<button onClick={()=>{
let tempArr = [...title]; // title을 ...으로 배열에서 풀어준뒤, []로 다시 배열화해서 깊은복사.
tempArr[0] = '다람쥐 코트 추천';
setTitle(tempArr);
}}>다람쥐</button>
