삭제 기능 구현하기

리액트로 리스트 형태의 데이터를 출력할 때, 특정 항목을 삭제하는 기능은 굉장히 자주 사용됩니다. 이번 글에서는 아래 이미지처럼 Delete 버튼을 클릭하면 특정 항목을 삭제하고, 그 외의 항목은 그대로 유지되는 로직을 살펴보겠습니다.

삭제 로직 구현

1. 전체 구조 설명

  • topics라는 상태 배열에서 특정 항목을 삭제하는 기능입니다.

  • input type="button"으로 만든 Delete 버튼이 클릭되면 onClick 이벤트 핸들러가 실행됩니다.

  • 이 핸들러는 topics 배열을 순회하며, 삭제할 id와 일치하지 않는 항목들만 newTopics 배열에 추가합니다.

  • 마지막에 setTopics(newTopics)를 호출해 상태를 갱신하고, 모드를 WELCOME으로 되돌립니다.

alt text

이 방식은 불변성 유지를 위해 새 배열을 만들어 setTopics()에 전달하는 전형적인 패턴입니다.


여러 태그를 감싸는 리액트 문법: <>...</>

리액트는 하나의 컴포넌트에서 return 시 반드시 하나의 부모 태그만 반환할 수 있습니다. 하지만 여러 요소를 나란히 렌더링하고 싶을 때도 있죠. 이때 사용하는 것이 바로 Fragment 문법입니다:

return (
  <>
    <li>...</li>
    <li>...</li>
  </>
)

  • <>...</>은 React.Fragment의 축약 표현입니다.

  • 의미 없는 div 태그를 추가하지 않고도 다수의 요소를 반환할 수 있습니다.

  • 위 코드에서는 Update 링크와 Delete 버튼을 <></>로 감싸 하나의 부모 노드처럼 동작하도록 했습니다.

정리

  • 삭제 기능 구현 시, 기존 배열을 직접 수정하지 않고 새 배열을 만들어 setState 해야 합니다.

  • 리액트는 JSX 문법상 하나의 루트 엘리먼트만 반환해야 하므로, 형제 태그가 있을 경우 <></>를 사용하여 감싸줍니다.