[TypeScript]나만 보는 TypeScript 기초 메모장(배열 삭제, filter메서드)

기본적인 filter 메서드 개념

filter 메서드는 배열을 순회하면서 주어진 조건을 만족하는 요소만 새로운 배열로 반환.

const numbers = [1, 2, 3, 4, 5];
const filteredNumbers = numbers.filter(num => num !== 3);
console.log(filteredNumbers); // [1, 2, 4, 5]

 

React에서 filter를 활용한 배열 삭제 기능

import React, { useState } from "react";

const MemoPad: React.FC = () => {
  const [tasks, setTasks] = useState<string[]>(["공부하기", "운동하기", "책 읽기"]);

  const deleteTask = (index: number) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            {task} <button onClick={() => deleteTask(index)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default MemoPad;

 

• filter를 사용하여 삭제할 항목을 제외한 새로운 배열을 생성.
• setTasks(newTasks)를 호출하여 새로운 배열을 상태(state)에 반영.
• 삭제 버튼을 클릭하면 해당 인덱스를 가진 요소가 제거.

동작 과정

• tasks.filter((_, i) => i !== index);에서 filter는 tasks 배열의 각 요소를 순회하면서 콜백 함수의 반환 값이 true인 요소만 포함하는 새로운 배열을 만듦.
• _는 배열 요소를 의미하지만 여기서는 사용하지 않기 때문에 _로 생략.
• i는 현재 요소의 인덱스를 나타냄.
• i !== index 조건을 확인해서 index에 해당하는 요소를 제외하고 나머지만 남김.

단계별 필터링 과정

i (인덱스)task (값)i !== index (1)포함 여부

0	공부하기	0 !== 1 → true	포함
1	운동하기	1 !== 1 → false	제외
2	책 읽기	2 !== 1 → true	포함

즉, "운동하기"가 제거되고 새로운 배열 ["공부하기", "책 읽기"]가 반환됨.