React | useState에서 배열 사용시

useState

보통 값을 담을때 변수를 쓰기도하지만
리액트에서는 useState를 사용한다
 
변수는 주로 값이 바뀌지않는 데이터
예를들면 로고나 항상 값이같은 상수 같은 애들을 사용
 
useState는
서버에서 실시간으로 데이터를 받아와서 출력해야할때 사용
 
그래서 그냥 변수만 사용했을때 변수값이 달라져도 리엑트는 재렌더링 X
useState 는 값이 바뀌는걸 감지하고, 값이 바뀌면 재렌더링을 함
 
변수는 일반적으로 값을 변경할때 그냥 변수에다 새로운 값 넣으면 바뀌지만
useState는 좀 방식이 다르다
 
항상 useState로 변수 선언시 저렇게
첫번째인자로 변수명을 쓰고
두번째 인자로 변수명을 set해주는 함수명을 써준다
그리고 useState안에는 abc에 담을 초기값을 써준다

let [abc,setAbc] = useState(0)

 
이후에 값을 abc안에 값을 바꾸고싶을때는 아래와 같이 사용하면된다

setAbc(10)

 

useState로 배열사용시

vscode 터미널에서 새 리엑트 프로젝트를 생성한다

npx create-react-app reactstudy

 
만약 이런 배열이 있다고 치자

  let [글제목, 글제목변경] = useState(["홍대", "강남", "역삼"]);

 
그럼 글제목 중 '홍대‘를 '서울'로 변경하고 싶을때에는 아래와 같이 해주면 된다

글제목변경(["서울", "강남", "역삼"]);

 
똑같은 배열구조를 넣어주면된다
 
근데 이렇게 쓰면 코드가 중복이라 너무 비효율적이다
 
그래서 아래와 같이 써보면 되지않을까?

  let [글제목, 글제목변경] = useState(["홍대", "강남", "역삼"]);
  
  글제목[0] = "서울"
  
  글제목변경(글제목)

 
그런데 리액트에서는 Array나 Object같은 것들은 원본을 보존해주는것을 지향한다
그래서 아래와같이 고쳐보자

  let [글제목, 글제목변경] = useState(["홍대", "강남", "역삼"]);
  
  let copy = 글제목
  copy[0] = "서울"
  글제목변경(copy)

 
 
전체코드는 이렇다

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let [글제목, 글제목변경] = useState(["홍대", "강남", "역삼"]);
  let [따봉, 따봉변경] = useState(0);
  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <button
        onClick={() => {
          let copy = 글제목;
          copy[0] = "서울";
          글제목변경(copy);
        }}
      ></button>
      <div>
        <h4>
          {글제목[0]}{" "}
          <span
            onClick={() => {
              따봉변경(따봉 + 1);
            }}
          ></span>
        </h4>
      </div>
    </div>
  );
}

export default App;

버튼을 눌러도
 
홍대는 서울로 변경되지 않았다
 
왜일까????
 
이유는 간단s
 
배열은 메모리 주소를 가리키기때문이다
 
그 주소가 가리키고있는 배열속 값을 바꿀지언정
 
배열의 주소는 바뀌지않았기때문에
 
useState 입장에서는 바뀜을 감지하지 못했고
 
그래서 재렌더링이 되지 않았던 것이다
 
그래서 아래와 같이 하면 해결된다

let copy = [...글제목];
copy[0] = "서울";
글제목변경(copy);

 
... 은 그 주소안에 값들을 반환하는것
[] 를 씌움으로써 새로운 주소에  반환된 값들을 집어넣는 것
그래서 deepcopy(값을 복사)가 된것이다
참고로 shallowcopy는 참조주소를 복사
 

import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  let [글제목, 글제목변경] = useState(["홍대", "강남", "역삼"]);
  let [따봉, 따봉변경] = useState(0);
  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <button
        onClick={() => {
          let copy = [...글제목];
          copy[0] = "서울";
          글제목변경(copy);
        }}
      ></button>
      <div>
        <h4>
          {글제목[0]}{" "}
          <span
            onClick={() => {
              따봉변경(따봉 + 1);
            }}
          ></span>
        </h4>
      </div>
    </div>
  );
}

export default App;

정리하자면

useState는 상태를 감지하고, 상태가 변경이 되면 재렌더링을 함
Object나 Array같은 경우 상태 = 메모리주소
그래서 안에 데이터를 바꾼다고해서 메모리주소가 바뀌는것은 아님
그래서 화면이 업데이트가 안되는것
배열값을 변경해서 재렌더링을 하고싶다면
...를 이용해 deepCopy를 활용하자!