useState json 값 변경하기 - 전개연산자

json 상태변수 데이터 전부 변경하기

전부 변경하는 것은 set함수에 매개변수로 넣어주면 끝난다.

  const [coordinate, setCoordinate] = useState({
    startX: "",
    startY: "",
    endX: "",
    endY: "",
  });

  const pos = {
    startX: 1,
    startY: 2,
    endX: 3,
    endY: 4
  }

  setCoordinate(pos);

json 상태변수 데이터 추가하기

기존에 저장한 값들을 유지하면서 원하는 속성값을 추가하려면
아래와 같이 전개연산자를 사용하여 작성해야 한다.

  const [coordinate, setCoordinate] = useState({
    startX: "",
    startY: "",
    endX: "",
    endY: "",
  });

  const startX = 1; // 추가할 값
  const startY = 2; // 추가할 값

  setCoordinate({ ...coordinate, startX: startX, startY: startY });

  const endX = 3; // 추가할 값
  const endY = 4; // 추가할 값
  setCoordinate({ ...coordinate, endX: endX, endY: endY });

key와 value의 변수명이 같은 경우

key와 value의 변수명이 startX로 같기때문에
아래와 같이 작성해도 동일하게 작동한다.

  const [coordinate, setCoordinate] = useState({
    startX: "",
    startY: "",
    endX: "",
    endY: "",
  });

  setCoordinate({ ...coordinate, startX, startY });