React array, object state 변경하는 법

array, object state 변경하는 법

예제 : 버튼 클릭시 첫 글자가 수정되는 기능을 만들어보자

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

return (
	<button onClick={ ()=>{ 
      글제목변경(['여자코트 추천', '강남 우동맛집', '파이썬 독학'])
    }}> 수정버튼 </button>
)  

위와 같은 식은 확장성이 부족함 현재는 배열이 몇개 없으니 가능할지 몰라도 100개 200개 들어가면 말도 안되는 코드입니다.

그럼 아래와 같은 코드로 바꿔보자

let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      글제목[0] = '여자코트 추천';
      글제목변경(글제목)
    } }> 수정버튼 </button>
  )

위와 같은 코드는 글제목Array 에 있는 첫번째 자료을 찾아서 글자를 바꾼다. 하지만 array, object자료를 다룰땐 원본 데이터를 직접 조작하는것보단 기존 데이터를 보존하는 방식이 좋다. 그래서 아래와 같은 방식을 사용했다.

let [글제목, 글제목변경] = useState( ['남자코트 추천', '강남 우동맛집', '파이썬 독학'] );  
  
  return (
    <button onClick={ ()=>{ 
      let copy = [...글제목];
      copy[0] = '여자코트 추천';
      글제목변경(copy)
    } }> 수정버튼 </button>
  )

state의 동작 원리

state변경 을 할때는 기존state == 신규state 이렇게 먼저 검사를 한다. 그래서 ture가 나오면 state를 변경해 주지 않는다. 자바스크립트는 array/object 자료를 하나 만들면 해당 자료를 RAM이라는 가상공간에 몰래 저장되고 변수는 그 자료가 어디 있는지 가르키는 화살표만 남게된다.

let data1 = [1,2,3];
let data2 = data1;   //복사문법임 

예를들어 위 와 같은 코드는 복사가 되기는 하지만 data1과 data2는 복사는 되지만 각각 별개로 저장되는 것이 아니라 똑같은 값을 공유하게 된다.

let data1 = [1, 2, 3];
let data2 = data1;  //복사
data2[0] = 1000;  //data2 내부 변경
console.log(data2 === data1)   

//결과값 : true;