React에서 useState로 배열과 객체 관리하기

by

React 애플리케이션을 개발하면서 상태를 관리하는 것은 중요한 부분 중 하나입니다. 이번 포스팅에서는 React의 useState를 사용하여 배열과 객체를 어떻게 관리하고 수정, 추가, 삭제할 수 있는지 살펴보겠습니다.


배열 관리하기

1. 배열 초기화하기

먼저, 배열을 초기화하고 상태로 설정하는 방법입니다.

import React, { useState } from 'react';

function ArrayExample() {
  // 초기 배열 상태 설정
  const [myArray, setMyArray] = useState(['apple', 'banana', 'cherry']);
  
  // ...
}


2. 배열에 항목 추가하기

// 배열에 항목 추가
const addItem = () => {
  const newItem = 'date';
  // 새 배열 생성 (기존 배열 복사 + 새 항목 추가)
  const updatedArray = [...myArray, newItem];
  setMyArray(updatedArray);
};


3. 배열에서 항목 수정하기

// 배열에서 항목 수정
const editItem = (oldItem, newItem) => {
  // 새 배열 생성 (항목 수정)
  const updatedArray = myArray.map(item => (item === oldItem ? newItem : item));
  setMyArray(updatedArray);
};


4. 배열에서 항목 삭제하기

// 배열에서 항목 제거
const removeItem = (itemToRemove) => {
  // 새 배열 생성 (항목 제거)
  const updatedArray = myArray.filter(item => item !== itemToRemove);
  setMyArray(updatedArray);
};



객체 관리하기

1. 객체 초기화하기

import React, { useState } from 'react';

function ObjectExample() {
  // 초기 객체 상태 설정
  const [myObject, setMyObject] = useState({
    name: 'John',
    age: 30,
    city: 'New York',
  });
  
  // ...
}


2. 객체에 속성 추가하기

// 객체에 속성 추가
const addProperty = () => {
  const newProperty = 'occupation';
  const updatedObject = { ...myObject, [newProperty]: 'Engineer' };
  setMyObject(updatedObject);
};


3. 객체의 속성 수정하기

// 객체에서 속성 수정
const editProperty = (property, newValue) => {
  const updatedObject = { ...myObject, [property]: newValue };
  setMyObject(updatedObject);
};


4. 객체에서 속성 삭제하기

// 객체에서 속성 삭제
const deleteProperty = (propertyToDelete) => {
  const { [propertyToDelete]: deletedProperty, ...rest } = myObject;
  setMyObject(rest);
};

React에서 useState를 사용하여 배열과 객체를 관리하면 상태를 불변하게 유지하면서도 수정, 추가, 삭제할 수 있습니다. 이러한 방법을 사용하면 React가 변경 사항을 감지하고 컴포넌트를 적절하게 렌더링합니다.

이제 React 애플리케이션에서 배열과 객체를 효과적으로 관리할 수 있는 방법을 알았습니다. 이러한 상태 관리 패턴은 웹 애플리케이션 개발에서 자주 사용되며, React의 강력한 기능 중 하나입니다.




Leave a Comment