[React] React Hooks 활용하기: useState로 컴포넌트의 상태 관리하기

React에서 state 값을 변경하는 방법은 두 가지가 있습니다. 함수형 컴포넌트에서는 useState 훅을 사용하고, 클래스형 컴포넌트에서는 setState 메서드를 사용합니다. 주어진 두 가지 변수(person과 personList)의 특정 값을 변경하는 방법을 설명하겠습니다.

1. person의 특정 값 변경

   - useState 훅을 사용하여 person을 상태로 관리합니다.
   - useState를 사용하여 상태를 설정하고, 필요한 값을 변경한 후 새로운 상태로 설정합니다.

import React, { useState } from 'react';

// Person 타입 정의
type Person = {
  id: number;
  first_name: string;
  last_name: string;
  address: string;
}

const MyComponent: React.FC = () => {
  // Person 타입을 가진 상태 선언
  const [person, setPerson] = useState<Person>({
    id: 1,
    first_name: "Dal",
    last_name: "Lorente",
    address: "Apt 357"
  });

  // 특정 값 변경
  const changeLastName = () => {
    setPerson(prevPerson => ({ ...prevPerson, last_name: 'NewLastName' }));
  };

  return (
    <div>
      <p>Last Name: {person.last_name}</p>
      <button onClick={changeLastName}>성 변경</button>
    </div>
  );
};

 

2. personList의 특정 값 변경

   - useState 훅을 사용하여 personList를 상태로 관리합니다.
   - 필요한 값을 변경하고, 새로운 배열을 생성하여 상태로 설정합니다.

import React, { useState } from 'react';

// Person 타입 정의
type Person = {
  id: number;
  first_name: string;
  last_name: string;
  address: string;
}

const MyComponent: React.FC = () => {
  // Person 타입을 요소로 가진 배열 상태 선언
  const [personList, setPersonList] = useState<Person[]>([
    { id: 1, first_name: "Evangelin", last_name: "Duggen", address: "Apt 1007" },
    { id: 2, first_name: "Lexy", last_name: "Sweetman", address: "Suite 88" },
    { id: 3, first_name: "Cameron", last_name: "Twiddell", address: "Room 956" },
    { id: 4, first_name: "Jolynn", last_name: "Barense", address: "Suite 53" }
  ]);

  // 특정 값 변경
  const changeLastName = () => {
    const newList = personList.map(person => {
      if (person.id === 1) {
        return { ...person, last_name: 'NewLastName' };
      }
      return person;
    });
    setPersonList(newList);
  };

  return (
    <div>
      <ul>
        {personList.map((person, index) => (
          <li key={index}>{person.first_name} {person.last_name}</li>
        ))}
      </ul>
      <button onClick={changeLastName}>성 변경</button>
    </div>
  );
};

 

personList의 값을 변경할 때 `map` 함수를 사용하는 것은 기존 배열을 변경하지 않고 새로운 배열을 생성하기 위함입니다. 여기서 두 번의 `return`은 다음과 같은 이유로 사용됩니다.

1. 첫 번째 `return`: 특정 조건을 만족하는 요소를 변경한 경우 해당 요소를 새로운 객체로 반환합니다. 이렇게 함으로써 기존 배열의 요소를 변경하지 않고 새로운 배열을 생성합니다. 이 경우는 `if` 문에서 조건을 충족하는 경우에 해당합니다.

2. 두 번째 `return`: `map` 함수는 배열의 각 요소를 순회하면서 콜백 함수를 호출하고, 콜백 함수에서 반환된 값을 모아서 새로운 배열을 생성합니다. 조건을 만족하지 않는 경우에는 요소를 그대로 반환해야 합니다. 따라서 `if` 문에서 조건을 충족하지 않는 경우에는 변경하지 않고 그대로 반환하기 위해 두 번째 `return`이 사용됩니다. 

이렇게 함으로써 `map` 함수는 모든 요소를 순회하면서 조건을 만족하는 요소는 변경하고, 나머지 요소는 변경하지 않은 채로 새로운 배열을 생성합니다.