6. array, object state 변경하는 법

저번시간 강의 숙제.
특정 버튼을 만들어, 누르면 남자코트 -> 여자코트로 내용을 변경하도록 코드 작성.

let [글제목, 글제목변경] = useState([
  "남자코트 추천",
  "강남우동맛집",
  "파이썬독학",
]);

function changeTitle() {
  let copy = [...글제목];
  copy[0] = "여자코트 추천";
  글제목변경(copy);
}

.
.
.

<span
  onClick={() => {
    changeTitle();
  }}
    >
      {" "}
  변경버튼
</span>

onClick으로 changeTitle() 함수 실행.
글제목 array의 0번째에 "여자코트 추천"이라는 글자를 담음.
글제목 state의 변경함수 실행. 변경완료.

state 변경함수 동작원리

state 변경함수는 기존 state === 신규 state 검사. true면 변경 x.

      let copy = 글제목;
      copy[0] = '여자코트 추천';
      글제목변경(copy)

reference data type복사라서, 가리키는 곳이 달라지는거지 실제 값은 copy와 글제목이 공유.
이렇게는 값 변경이 안됨.

let copy = [...글제목];
copy[0] = '여자코트 추천';
글제목변경(copy)

이렇게 하면 변경이 잘 됨.

spread operator

[...글제목]에 사용된 문법.
array나 object 자료형 왼쪽에 붙일 수 있으며,
참조복사가 아니라 값을 복사할 수 있게 괄호를 벗겨줌. 즉 새로운 array나 object를 만들수있음.

정리하자면

function changeTitle() {
  let copy = [...글제목];
  copy[0] = "여자코트 추천";
  글제목변경(copy);
}

1. spread operator로 글제목 array의 값을 copy변수에 복사. copy array가 생성됨.
2. copy array [0]번 배열에 새로운 값을 집어넣음.
3. state 변경함수 실행. 값이 달라졌음. 따라서 [글제목] state 내용도 변경됨.