React의 상태 배열에서 항목을 삭제하는 방법은 무엇입니까?

최근에 React 작업을 시작했고 useState 후크에 저장된 배열에서 항목을 삭제하는 올바른 방법을 알고 싶습니까? 당신은 바로 이곳에 있습니다!

프로젝트 설정

먼저 다음 명령을 사용하여 반응 프로젝트를 생성해 보겠습니다.

npx create-react-app react-delete-usestate

index.css에 다음 스타일을 추가합니다.

body {
  display: flex;
  justify-content: center;
}

ul {
  list-style-type: none;
  padding: 0;
}
li {
  padding: 6px 0;
  display: flex;
  justify-content: space-between;
}

button {
  margin-left: 20px;
}

이제 과일 배열을 만들고 useState 후크에 저장하고 삭제 버튼과 함께 표시합니다.

import { useState } from "react"

function App() {
  const [fruits, setFruits] = useState([
    "🍎 Apple",
    "🍊 Orange",
    "🍌 Banana",
    "🍇 Grapes",
  ])
  return (
    <div className="App">
      <ul>
        {fruits.map(fruit => {
          return (
            <li key={fruit}>
              <span>{fruit}</span>
              <button>Delete</button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default App

지금 앱을 실행하면 아래와 같이 과일 목록을 볼 수 있습니다.

다양한 삭제 방법

값으로 삭제

고유한 항목 목록이 있다고 확신하는 경우 다음 값을 사용하여 항목을 삭제할 수 있습니다.

import { useState } from "react"

function App() {
  const [fruits, setFruits] = useState([
    "🍎 Apple",
    "🍊 Orange",
    "🍌 Banana",
    "🍇 Grapes",
  ])
  const deleteByValue = value => {
    setFruits(oldValues => {
      return oldValues.filter(fruit => fruit !== value)
    })
  }
  return (
    <div className="App">
      <ul>
        {fruits.map(fruit => {
          return (
            <li key={fruit}>
              <span>{fruit}</span>
              <button onClick={() => deleteByValue(fruit)}>Delete</button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default App

여기서는 setFruits 함수에 콜백을 전달합니다. 콜백 내에서 우리는 filter function 을 호출하고 있으며, 이는 deleteByValue 에 전달된 값을 제외한 모든 값을 필터링하여 전달된 값을 삭제합니다.

색인으로 삭제

중복 값이 ​​있을 수 있다고 생각하고 배열 인덱스로 삭제하려는 경우 유사한 방식으로 이를 달성할 수 있습니다.

import { useState } from "react"

function App() {
  const [fruits, setFruits] = useState([
    "🍎 Apple",
    "🍊 Orange",
    "🍌 Banana",
    "🍇 Grapes",
  ])
  const deleteByIndex = index => {
    setFruits(oldValues => {
      return oldValues.filter((_, i) => i !== index)
    })
  }
  return (
    <div className="App">
      <ul>
        {fruits.map((fruit, index) => {
          return (
            <li key={fruit}>
              <span>{fruit}</span>
              <button onClick={() => deleteByIndex(index)}>Delete</button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default App

배열에서 개체 삭제

개체 배열이 있고 개체의 ID를 기반으로 삭제하려는 경우 다음 코드를 사용하여 삭제할 수 있습니다.

import { useState } from "react"

function App() {
  const [fruits, setFruits] = useState([
    { id: 1, name: "🍎 Apple" },
    { id: 2, name: "🍊 Orange" },
    { id: 3, name: "🍌 Banana" },
    { id: 4, name: "🍇 Grapes" },
  ])
  const deleteById = id => {
    setFruits(oldValues => {
      return oldValues.filter(fruit => fruit.id !== id)
    })
  }
  return (
    <div className="App">
      <ul>
        {fruits.map(fruit => {
          return (
            <li key={fruit.id}>
              <span>{fruit.name}</span>
              <button onClick={() => deleteById(fruit.id)}>Delete</button>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default App

내가 가장 좋아하는 삭제 방법은 id로 삭제한 다음 인덱스로 삭제하는 것입니다. 아래 댓글에서 가장 좋아하는 것을 알려주세요 👇.