setState로 array,object 변경

setState 특징 - 기존의 state와 신규 state를 비교해서 두개의 값이 다를경우에만 변경하고 리렌더링됨.

*** array/object를 다룰땐 원본은 보존하고 복사본을 활용해서 변경하는게 좋음

array/object는 변수에 해당 값을 직접 저장하는게 아니라 값을 저장한 메모리의 주소를 가지고있기 때문에 새로운 변수 = 기존배열 과 같이 입력하면 새로운 변수에는 주소값이 할당됨
즉 setState(새로운변수)로 사용해도 state 값은 같은 주소값을 가지고 있기 때문에 변경을 인식하지 못해서 리랜더링이 발생하지 않음
이럴땐 새로운 변수 = [...기존배열] 과 같이 새로운 변수에 직접 값을 할당해줘야함. .

코드 예시

let [string, setString] = useState("기존값");
  const changeString = () => {
    setString("변경값");
  };
  
  
  let [array, setArray] = useState(["기존배열"]);
  const changeArray = () => {
    let copy = array;
    copy[0] = "새로운배열";
    setArray(copy);
  };
  
  let [array2, setArray2] = useState(["기존배열2"]);
  const changeArray2 = () => {
    let copy = [...array2];
    copy[0] = "새로운배열2";
    setArray2(copy);
  };
  
<div className="App">
        <div>{string}</div>
        <button onClick={changeString}>문자값 변경하기</button>
        <div>{array}</div>
        <button onClick={changeArray}>배열값1 변경하기</button>
        <div>{array2}</div>
        <button onClick={changeArray2}>배열값2 변경하기</button>
</div>

배열값 1 변경하기버튼은 눌러도 리렌더링이 발생하지않음.