[react] array,object state 변경 시

데이터 변경 시 ..

글수정이라는 버튼 클릭 시 원본데이터(글제목)의 [0]번째 데이터를 '여자 코트 추천'으로 변경하려고 함.

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

  return (

    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

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

이렇게 원본데이터(글제목)를 가져와 직접 변경해줄 수 있겠지만, 이건 좋은 방식이 아님.

원본데이터를 수정하지 않고 변경하는것이 중요함
그래서 copy본을 만들어 copy[0]의 테이터를 수정하려고 함.

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

  return (
 	... 
    
      <button onClick={()=>{
        let copy = 글제목
        copy[0] = '여자 코트 추천';
        글제목변경(copy);
      }}>글수정</button>

copy라는 변수를 생성해서 원본데이터(글제목)을 넣어주었음.
그리고 이 copy의 [0]번째 데이터의 값을 '여자 코트 추천'으로 수정함.

근데 동작하지 않음..

결론부터 말하면
let copy = [...글제목]으로 넣어주면 동작함.
왤까?

동작원리 이해하기

💡먼저 알아두어야 할 state함수의 특징이 있음
기존state == 신규state의 경우 state를 변경하지 않음

array / object의 특징

let arr = [1, 2, 3]

[1, 2, 3]이라는 array를 'arr'에 저장하는 것이 아니라
미지의 영역(ram)에 [1, 2, 3]을 넣고, 이게 이디있는지를 알려주는 '화살표'만 arr에 넣는 것.

                       RAM
                  _______________
                 |    [1, 2, 3] |  
    let arr   →  |              |
                 |______________|    이렇게
                 

✅ 그래서

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

일케 해주면 array를 수정은 됐지만, 변수에 있던 화살표는 수정이 안됨
즉, 기존데이터의 '글제목'과 변경 후 '글제목'의 화살표는 동일하므로 state를 변경해주지 않음

✅ 같은 이유로

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

copy라는 변수를 새로 생성해서 데이터를 수정했지만,
'글제목'이라는 원본 데이터에는 화살표만 들어있음.

그래서 copy는 기존state와 달라지지 않았다고 생각하여 변경이 일어나지 않음.

중간에 console.log(copy==글제목);을 넣어보면 알 수 있음.

같다고 뜸(그래서 state 변경 x / 둘 다 화살표만 저장되어 있기 때문)

결론적으로.. let copy = [...원본데이터];는 화살표를 새로 바꿔달란뜻임.

# Summary

array나 object형식의 state를 변경할 때는

✔️ 원본데이터를 직접 수정하지 않고
✔️ copy본을 생성해 원본데이터를 불러옴

• let copy = [...원본데이터];