[React] State 배열에서 특정 항목 삭제하기 - filter() 활용

React에서 여러 개의 데이터를 배열로 관리하다 보면 특정 항목만 삭제해야 하는 경우가 있다.

이번에는 링크 목록을 예제로 State로 관리하는 배열에서 원하는 항목만 삭제하는 방법을 정리했다.

1. State로 배열 관리하기

먼저 useState를 사용하여 링크 목록을 관리했다.

const [links, setLinks] = useState([
    {
        text: "네이버",
        href: "https://www.naver.com"
    },
    {
        text: "다음",
        href: "https://www.daum.net"
    },
    {
        text: "구글",
        href: "https://www.google.com"
    },
    {
        text: "야후",
        href: "https://www.yahoo.com"
    }
]);

links는 현재 링크 목록을 저장하는 State이고, setLinks는 State를 변경하는 함수이다.

화면에서는 map()을 이용해 배열의 데이터를 반복해서 출력했다.

{links.map((link, index) => (
    <li key={index}>
        {link.text}
        <button onClick={() => deleteItem(index)}>
            X
        </button>
    </li>
))}

각 항목의 삭제 버튼을 클릭하면 해당 항목의 index를 deleteItem()에 전달했다.

2. filter()로 원하는 항목 삭제하기

삭제 기능은 다음과 같이 구현했다.

const deleteItem = (targetIdx) => {
    const newLinks = links.filter((link, index) => index !== targetIdx);
    setLinks(newLinks);
};

filter()는 배열의 요소를 하나씩 확인하고 조건을 만족하는 요소만 모아서 새로운 배열을 반환한다.

여기서는 삭제하려는 targetIdx와 다른 요소만 남겼다.

예를 들어 다음과 같은 배열이 있다고 하면,

0번 네이버
1번 다음
2번 구글
3번 야후

targetIdx가 1이라면 1번 다음을 제외한 새로운 배열이 만들어진다.

0번 네이버
2번 구글
3번 야후

단순히 배열만 변경한다고 화면이 자동으로 변경되는 것은 아니다.

React에서는 State를 변경할 때 State 변경 함수를 사용해야 한다.

setLinks(newLinks);

setLinks()를 호출하면 React가 State가 변경되었다는 것을 확인하고 변경된 State를 기준으로 화면을 다시 렌더링한다.