| React | state가 array, object 이면? 카피본을 만들어서 수정하기, 변경함수 동작원리, reference data

우리는 state 형태로 array, object 올 수 있다는 것을 알고 있다 
Array,object 경우에는 원본은 보존하는게 좋다. 
그리고 카피본을 만들어서 수정하는 것.
이게 무슨 말일까? 

버튼을 클릭 하면 첫번째 제목을 바꿔주자!

🚫 잘못된 예시 

function App(){
  
  let [글제목, 제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
     <button
        onClick={() => {
          let copy = [글제목];
          copy[0] = "여자코트 추천";
          제목변경(copy);  
        }}
        >
          제목바꿔줘제발
        </button>
  )
}

👀  저 copy 변수는 뭐지?

copy 변수에 기존 array를 복사 해놓고, 기존 값을 보존하는 것이다.

이렇게 Array,object 경우에는 원본은 보존하는게 좋다.

그 이유는 원본 막 바꿔버렸을 때 갑자기 원본이 필요해질 수 있기 때문.

그냥 한마디로 기존값은 보존해주는 식으로 코드짜는게 좋은관습.

 

하지만.  저 코드로 하면 제목은 바뀌지 않는다 .....왜 일까? 

먼저 state 변경함수 동작원리 알아보자. 

⭐  기존state === 신규state 이렇게 먼저 검사해보자.

그래서 같으면(true)  state 변경을 해주지 않는다.!!!!

 

왜 제목이 바뀌지 않는 이유는

제목변경(copy) 해도 copy라는 변수가 기존state와 같아서 변경을 안해준 것이다.

 

응??? 기존state은 남자코트추천,  copy 여자코트추천인데 다르잖아요??!!!!!!!!

콘솔로 찍어보면 기존state === copy 비교해보면 같다고 나온다...ㅠ

 

그 이유는, 우리가 쓰는 array, object는  reference data type 이다.

자바스크립트는 array or object 를 만들면
[1,2,3] 자료는 램이라는 가상공간에 몰래 저장이 되고
let arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있는 것!!

array/object 자료를 복사하면 화살표를 복사한 것
똑같은 화살표를 가지게 된다. 같은 자료를 가리킴  

---

💡 그럼 기존이랑 copy랑 어떻게 다르다고(false) 해야 할까요,,,? 

정답 : let copy= [... 글제목]

copy 변수를 이렇게 수정하면 제목이 잘 바뀐다. ㅎㅎ

 

< ... 은 spread operator 문법>
array나 object 자료형 왼쪽에 붙일 수 있으며
뜻은 별거없고 괄호를 벗겨주세요~ 라는 뜻

 

자료들을 괄호 벗긴담에 다시 array로 만들어주세요~ 

화살표가 달라지게 된다. 새로운 array로 인식

그렇게 하면 화살표가 다른 완전 독립적인 array 복사본을 생성해줄 수 있다.

(object 자료형도 마찬가지) 

 

다시 console.log(기존state === copy);

찍어보면 false가 나와서 제목이 변경된다.~

---

< 오늘의 결론 >

리액트에서 array/object state를 수정하고 싶으면

독립적인 카피본을 만들어서 수정하는게 좋다. 

let copy= [...기존state] 

let copy= {...기존state} 

이렇게 하면 독립적인 카피가 하나 생성~!

 

 

[참고]

코딩애플