[React] useRef 예제

[React] 기능 구현_③지우기 기능 구현 부분에서 할 일을 지우는 코드를 다시 봐보자!

① 먼저 filter 함수를 사용해 onRemove 함수를 작성해 보자!

• UseRef_todoApp_App.jsx

import React, { useState, useRef, useCallback } from 'react';
import TodoTemplate from '../components/TodoTemplate';
import TodoInsert from '../components/TodoInsert';
import TodoList from '../components/TodoList';

const UseRef_todoApp_App = () => {
  
  const [todos, setTodos] = useState([
    {
      id: 1,
      text: '리액트 기초 알아보기',
      checked: true,
    },
    {
      id: 2,
      text: '컴포넌트 스타일링해 보기',
      checked: true,
    },
    {
      id: 3,
      text: '일정 관리 앱 만들어 보기',
      checked: false,
    },
  ]);

 
  const nextId = useRef(4);
   
  // (...생략...)
  
  
  // 할 일 삭제 => 특정 id를 가진 할 일을 삭제함!
  const onRemove = useCallback(
    (id) => {
      setTodos(todos.filter((todo) => todo.id !== id));
    },
    [todos], // 의존성 배열 => todos 상태가 변경될 때만 함수가 새롭게 생성
  );
 

  return (
    <TodoTemplate>
      <TodoInsert onInsert={onInsert} />
      <TodoList todos={todos} onRemove={onRemove/>
    </TodoTemplate>
  );
};

export default UseRef_todoApp_App;

filter 함수는 todos 배열의 각 항목(todo)을 순회하면서, 조건 (todo.id !== id)을 확인한다.

조건 (todo.id !== id)는 삭제하려는 id와 현재 항목의 id가 다른지 확인하는 건데, 여기서 !==는 불일치 연산자로, 값과 타입 모두를 비교해 다르면 true를 반환한다.

filter 함수는 true를 반환한 항목들만 새로운 배열에 포함시키므로 삭제하려는 id와 일치하지 않는 항목들만 남아 있게 되고, setTodos에 전달된 배열은 삭제 대상이 제거된 상태의 새로운 배열이 된다.

② 삭제 버튼을 누르면 TodoListItem에서 onRemove 함수에 현재 자신이 가진 id를 넣어 삭제 함수를 호출하도록 설정해준다.

• TodoListItem.jsx

import React from 'react';
import {
  MdCheckBoxOutlineBlank,
  MdRemoveCircleOutline,
  MdCheckBox,
} from 'react-icons/md';
import './TodoListItem.scss';
import cn from 'classnames';

// props로 전달된 todo, onRemove
export default function TodoListItem({ todo, onRemove }) {
  // todo 객체에서 id, text, checked 값을 추출
  const { id, text, checked } = todo;

  return (
    <div className="TodoListItem">
       <div className={cn('checkbox', { checked })}>
        {checked ? <MdCheckBox /> : <MdCheckBoxOutlineBlank />}
        <div className="text">{text}</div>
      </div>
      {/* 삭제 버튼 영역 */}
      {/* 삭제 버튼을 클릭하면 onRemove 함수 호출되어 삭제할 할 일의 id가 전달됨 */}
      <div className="remove" onClick={() => onRemove(id)}>
        <MdRemoveCircleOutline />
      </div>
    </div>
  );
}