사용상태 | React에서 사용하게 될 가장 일반적인 후크 중 하나 - 객체를 상태 값으로 사용

안녕하세요 여러분, 오늘 저는 React의 useState 후크에 대해 계속 이야기하겠습니다. 이전에는 그것이 무엇인지, 어떻게 사용하는지 다루었으며 문자열 및 배열과 같은 데이터 유형에 대한 몇 가지 사용 사례를 제공했습니다. 이 게시물에서는 useState 후크를 사용하여 개체 작업을 수행하는 방법에 대해 설명합니다. 이전 부분을 읽으려면

전체 코드는 다음과 같습니다. 나중에 작은 덩어리로 설명하겠습니다.

import { useState } from "react";

const JobUpdaterComp = () => {
  const [person, setPerson] = useState({
    name: "Ahmet Meliksah",
    age: 24,
    job: "customer representetive",
  });

  const updateJob = () => {
    setPerson({ ...person, job: "junior React developer" });
  };

  return (
    <div>
      <h1>Name: {person.name} </h1>
      <h1>Age: {person.age} </h1>
      <h1>Occupation: {person.job} </h1>

      <button
        onClick={updateJob}
        style={{
          padding: "1rem",
          borderRadius: "1rem",
          border: "none",
          backgroundColor: "rebeccaPurple",
          color: "white",
          cursor: "pointer",
        }}
      >
        Update Occupation
      </button>
    </div>
  );
};

export default JobUpdaterComp;

import { useState } from "react"; 먼저 React에서 useState를 가져옵니다. 그런 다음 person이라는 값을 만들고 다음과 같이 개체를 할당합니다.

const [person, setPerson] = useState({
    name: "Ahmet Meliksah",
    age: 24,
    job: "customer representetive",
  });

위의 개체에는 이름, 나이 및 직업 키가 있습니다. 그리고 이 개체에서 '작업' 키를 업데이트하려고 합니다. 이것이 올바른 해결책이라고 생각하십니까?

const updateJob = () => {
    setPerson({ job: "junior React developer" });
  };

위의 코드는 '작업' 키를 업데이트합니다. 그러나 이름 및 나이 키는 제거됩니다. 왜요? setPerson는 person의 값을 업데이트하는 함수이기 때문입니다. setPerson({ job: "junior React developer" }); 로 작성되면 작업을 업데이트하고 다른 키가 존재하지 않는 것처럼 업데이트합니다. 그렇기 때문에 상태의 객체를 업데이트할 때 다른 키를 보존하려는 경우(대부분 키를 보존하려는 경우) 키를 다시 작성해야 합니다. 또는 우리는 분해할 수 있습니다. 음, 다음과 같이 평소처럼 분해하겠습니다.

const updateJob = () => {
    setPerson({ ...person, job: "junior React developer" });
  };

위의 코드에서 { ...person, job: "junior React developer" } 이 부분은 다음을 의미합니다. '직업' 키를 제외하고 '사람' 개체에 있는 모든 것을 있는 그대로 제공합니다. job 키를 "junior React developer"로 업데이트

아래 코드는 위의 코드와 완전히 동일한 작업을 수행합니다.

const updateJob = () => {
    setPerson({name: "Ahmet Meliksah", age: 24, job: "junior React developer" });
  };

예, 개체가 이렇게 작을 때는 구조를 분해하지 않아도 괜찮습니다( {...person} ). 불행히도 대부분의 경우 그렇지 않습니다.

코드의 마지막 부분:

return (
    <div>
      <h1>Name: {person.name} </h1>
      <h1>Age: {person.age} </h1>
      <h1>Occupation: {person.job} </h1>

      <button onClick={updateJob}>
        Update Occupation
      </button>
    </div>
  );

보시다시피 저는 object.key ( {person.name} , {person.age} , {person.job} ) 구문으로 개체에 액세스합니다. 객체는 React에서 렌더링할 수 없으므로 객체 값을 가져오려면 이 구문( object.key )을 사용해야 합니다. 마지막으로 클릭( updateJob ) 시 onClick 기능을 트리거하는 버튼이 있습니다.

요약하자면, 다른 키를 보존하고 싶기 때문에 상태에 있는 객체에 주의하십시오. 따라서 업데이트할 때 Destructuring 방법을 사용하십시오.