• state는 컴포넌트 안에서 유동적으로 변경될 수 있는 데이터를 저장
• 리액트에서 state를 사용하기 위해서는 react 모듈 내 useState를 사용
• state 값이 변경되면 컴포넌트 재렌더링됨
• state 값을 변경하기 위해서는 setState()함수를 사

state 변경하기

1. state가 값일 경우

• setState()를 이용하여 값 변경

import {useState} from "react";
...
const [state, setState] = useState("hello world");

// 값 변경하기
setState("HELLO WORLD");

2. state가 객체 또는 배열일 경우

• state가 객체 또는 배열이라면 원시타입과 동일한 방법으로 state를 수정할 수 없음

• 값이 변경되더라도 state가 새로운 메모리주소를 참조하는게 아닌 기존의 메모리주소를 그대로 참조하고 있기 때문 → 의도대로 컴포넌트를 리렌더링 하지 않음

• 이전 상태(prevState)를 복사한 후 state내 속성을 새로운 상태로 변경

• 이전 상태를 기반으로 상태를 업데이트해야 할 때 사용

  import {useState} from "react";
  ...
  const [state, setState] = useState({
  	title: "hello",
  	content: "world",
  });
  const [arr, setArr] = useState(["hello", "world"]);
  
  // 객체 내 특정 값 변경하기
  let tmp = {...state};
  tmp.title="HELLO";
  setState(tmp);
  
  // 배열 내 특정 값 변경하기
  let tmp2 = [...arr];
  tmp2[1]="WORLD";
  setArr(tmp2);
  
  -------------------------
  setState(prevState => ({...prevState, title:"HELLO"}
  })