array, object state 변경하는 법

이렇게 작성하여 수작업으로 모든 state 값을 적어 수정해줄 수 있다.

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

 

하지만 원래 state 값이 3개라 망정이지 100개 이상이 있다면 다 칠 수 있을까?

• 기존 state를 첫 글만 바꿔서 state 변경함수에 집어넣을 수 있다.
• array 자료 안의 몇번째 항목을 변경하고 싶다면 array[순서]='바꿀값' 이렇게 하면됨.

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

• 하지만 array, object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다는 기존값은 보존해주는 식으로 코드 짜는게 좋다. (원본이 바뀌었을 때 원래 값이 필요할 경우가 있으니)
  • 하지만 이렇게 한다고 버튼을 눌러도 값이 변하지 않는다.

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

state 변경함수 동작 원리

• 기존 state==신규 state 이렇게 먼저 감사를 해본다. 이때 값이 같다면 state는 변경이 되지 않는다.
  • 그래서 위의 코드도 copy라는 변수가 기존 state와 같아서 변경을 안 해준다.
• copy라는 변수랑 기존 state안에 있는 자료가 다른데? 라고 생각할 수 있지만 실은 기존 state==copy는 비교하면 같다고 나온다.

array / object 동작 원리

• 자바스크립트는 array / object 자료를 하나 만들면 예를 들어 let arr=[1,2,3] 이렇게 만들면 [1,2,3] 자료는 램이라는 가상 공간에 몰래 저장이 됨
• let arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨져있다.

• 그래서 array / object 자료를 복사하면 이상한 일이 벌어짐
• 예를 들어 밑처럼 복사를 하면 복사는 된다.

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

• data1에 있던 자료를 data2에 복사한다는 뜻 출력해도 1,2,3이 잘 나온다.
• 하지만 이건 각각 1,2,3 이란 값을 별개로 저장하는 것이 아니라 data1과 data2는 똑같은 값을 공유하게 됨.
• data1을 변경하면  data2도 자동으로 변경이 된다.
• 변수에는 화살표만 저장이 된거기 때문에 이건 화살표를 복사한 것과 마찬가지 따라서 똑같은 화살표를 가지게 되기 대문에 같은 자료를 가리키게 된다.
• 그래서 같은 화살표를 가지고 있는 변수끼리는 등호로 비교해도 똑같다고 나옴

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

• 따라서 위의 코드에서 컴퓨터는  copy와 기존 글제목 state는 똑같다고 생각하기 때문에(화살표가 같아서) state 변경은 되지 않는다.

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

• 이것을 방지하기 위해 spread operator라는 문법을 사용
• array나 object 자료형 왼쪽에 붙일 수 있으며 괄호를 벗겨주세요 라는 뜻
• ...[1,2,3] 이렇게 쓰면 그 자리에 1,2,3이 남는다.

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

• data1에 있던 자료들을 괄호 벗긴 다음에 다시 array로 만들어달라 라고 사용하면 화살표가 사라진다.
  • 새로운 array로 인식하기 때문에
• 그래서 이렇게 사용하여 화살표가 다른 완전 독립적인 array 복사본을 생성할 수 있다.
• object 자료형도 마찬가지이다.