deep copy & spread 연산자

데이터를 수정하기 위해서는 복사본을 만들어야한다.

function App(){
  
  let [글제목, 글제목변경] = useState( ['JSX란', 'state사용하기', 'deepcopy'] );  
  
  function 제목바꾸기() {
    
    //todo
    
  }
  return (
    ...
      <button onClick={ 제목바꾸기 }> 수정버튼 </button>
      <h3> { 글제목[0] } <span>?</span> { 따봉 }</h3>
    ...
  )
}

위 코드를 보자.
총 3개의 글 제목이 있고 수정버튼을 누르면 제목바꾸기() 함수가 실행되어야한다.

그러기 위해선 state변경함수인 글제목변경 함수에 글제목을 바꿔치기 해 줄 새로운 배열이 들어가야한다.

다시 말해 글제목을 글제목변경 함수와 같은 형식의 array가 되어야한다.

그러기 위해서 글제목을 복사하자.

var 새로운어레이 = [...원본어레이]

위와 같이 복사하는 것을 deep copy라고한다.

주의

var newArray = 원본어레이;

위와같이 작성하는 것도 복사하는 것처럼 보일 수 있겠지만,
자바스크립트 내에서 array나 object 자료형은 = 등호로 복사하시면 각각 별개의 자료형이 생성되는게 아니라 값을 공유한다.

즉, 원본이 변경되면 newArray도 같이 변경된다.

function 제목바꾸기() {
  //deep copy를 사용하여 원본 글제목을 복제
  var newArray = [...글제목];
  
  //새로 생성된 배열의 0번 인덱스에 수정할 제목 입력
  newArray[0] = '새로운제목';
  글제목변경( newArray );
}

위 코드는 글제목 state의 사본을 생성하고, 사본을 조작한 다음에 state에 넣어주었다.

---

정리
리액트에서 state를 수정할때 사용하는 패턴

1. 수정하고 싶은 state의 deep/shallow 카피본을 하나 생성.

2. 카피본을 입맛에 맞게 수정.

3. 카피본을 state변경함수()에 집어넣기.