[React] 배열에 항목 삭제 하기

2024. 8. 6. 14:47· FrontEnd/React
목차
  1. 1.배열에 항목 삭제 하기
  2. 1-1.상태 정의
  3. 1-2.항목 제거 함수
  4. 1-3.컴포넌트 반환 JSX
728x90

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/


1.배열에 항목 삭제 하기

useState를 사용하여 상태를 업데이트한다.

 

 

1-1.상태 정의

names: 이름 목록을 저장하는 배열 상태입니다.
각 항목은 고유한 id를 가진 객체입니다.
const [names, setNames] = useState([
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
]);

 

 

1-2.항목 제거 함수

names.filter((name) => name.id !== id):   id가 일치하지 않는 항목들만 포함된 새로운 배열을 반환합니다.
const handleRemove = (id) => {
  setNames(names.filter((name) => name.id !== id));
};

 

 

1-3.컴포넌트 반환 JSX

names.map((person) => (<li key={person.id}>...</li>)): names 배열을 순회하면서 각 이름을 <li> 요소로 렌더링합니다.

<button onClick={() => handleRemove(person.id)}>Remove</button>: "Remove" 버튼을 클릭하면 해당 항목을 제거하는 handleRemove 함수를 호출합니다.
return (
  <div>
    <ul>
      {names.map((person) => (
        <li key={person.id}>
          {person.name}
          <button onClick={() => handleRemove(person.id)}>Remove</button>
        </li>
      ))}
    </ul>
  </div>
);

 

 

 

 

 

 

 

 

 

import React, { useState } from 'react';

function NameList() {
  // 상태로 names 배열과 input 상태를 정의
  const [names, setNames] = useState([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ]);
  const [input, setInput] = useState('');

  // 입력 필드의 값을 변경하는 함수
  const handleChange = (e) => {
    setInput(e.target.value);
  };

  // 새로운 이름을 names 배열에 추가하는 함수
  const handleAdd = () => {
    if (input.trim() === '') return; // 빈 입력 무시
    const newName = { id: names.length + 1, name: input }; // 새로운 이름 객체 생성
    setNames([...names, newName]); // 새로운 이름 객체를 배열에 추가
    setInput(''); // 입력 필드를 초기화
  };

  // 특정 항목을 제거하는 함수
  const handleRemove = (id) => {
    setNames(names.filter((name) => name.id !== id)); // id가 일치하지 않는 항목들로 새로운 배열 생성
  };

  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={handleChange}
        placeholder="Enter a name"
      />
      <button onClick={handleAdd}>Add Name</button>
      <ul>
        {names.map((person) => (
          <li key={person.id}>
            {person.name}
            <button onClick={() => handleRemove(person.id)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default NameList;
728x90

'FrontEnd > React' 카테고리의 다른 글

[React] 배열에서 항목 수정하기  (0) 2024.08.06
[React] 배열에 항목추가하기  (0) 2024.08.06
[React] 배열 렌더링  (0) 2024.08.06
  1. 1.배열에 항목 삭제 하기
  2. 1-1.상태 정의
  3. 1-2.항목 제거 함수
  4. 1-3.컴포넌트 반환 JSX
'FrontEnd/React' 카테고리의 다른 글
  • [React] 리액트 훅(Hooks)
  • [React] 배열에서 항목 수정하기
  • [React] 배열에 항목추가하기
  • [React] 배열 렌더링
아사_
아사_
프로그래밍 공부한거 정리해두는 메모장 블로그
아사_
개발공부 블로그
아사_
전체
오늘
어제
  • 분류 전체보기
    • FrontEnd
      • html
      • css
      • JavaScript
      • Node.js
      • React
      • React Native
    • BackEnd
      • SpringBoot
      • FastAPI
      • PHP
      • Flask
      • supabase
    • Language
      • Python
      • JAVA
      • Kotlin
      • C++
    • Development Tools
      • AWS
      • GIT,GITHUB
      • Docker
      • 메시지 브로커
      • 기타 도구,플랫폼
    • Computer Science
      • 개발지식
      • Server&Network
      • Algorithm&DataStructure
      • Security
      • DataBase
      • OS
    • AI
    • 기타
      • 잡다
      • Android
      • 도서
    • 클론코딩
      • 생활코딩 Express.js
      • 점프 투 장고
      • 생활코딩 Node.js
    • 프로젝트
      • DevQuest

인기 글

최근 글

250x250
hELLO · Designed By 정상우.v4.2.2
아사_
[React] 배열에 항목 삭제 하기
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.