#13 React에서 메모 삭제 기능 구현하기

 

이번 단계에서는 React 버전 메모장에 삭제 기능을 추가했다.

이전 JavaScript에서는 삭제 버튼을 누르면 배열에서 해당 메모를 제거하고, 직접 renderMemos()를 호출해서 화면을 다시 그렸다.

React에서는 방식이 조금 다르다.

React에서는 화면을 직접 다시 그리는 함수를 호출하지 않는다.
대신 state를 변경하면 React가 자동으로 화면을 다시 렌더링한다.

 

삭제 기능의 기본 흐름

이번 삭제 기능의 흐름은 다음과 같다.

삭제 버튼 클릭
→ 삭제할 메모 id 전달
→ confirm으로 삭제 여부 확인
→ memos 배열에서 해당 id를 가진 메모 제거
→ setMemos로 새 배열 저장
→ React가 자동으로 화면 다시 렌더링

JavaScript에서는 이런 흐름이었다.

삭제 버튼 클릭
→ memos 배열 변경
→ saveMemos()
→ renderMemos()

React에서는 이렇게 바뀐다.

삭제 버튼 클릭
→ memos 배열 변경
→ setMemos()
→ 자동 렌더링

즉, React에서는 renderMemos() 같은 함수를 직접 호출하지 않는다.

 

삭제 함수 만들기

먼저 삭제 기능을 담당하는 함수를 만들었다.

function handleDeleteMemo(id) {
  const isConfirmed = confirm('정말 삭제하시겠습니까?')

  if (!isConfirmed) {
    return
  }

  const nextMemos = memos.filter((memo) => {
    return memo.id !== id
  })

  setMemos(nextMemos)
}

이 함수는 삭제할 메모의 id를 매개변수로 받는다.

function handleDeleteMemo(id) {
  ...
}

여기서 id는 어떤 메모를 삭제할지 구분하기 위한 값이다.

 

confirm으로 삭제 확인하기

삭제는 실수로 누를 수 있기 때문에 먼저 확인창을 띄웠다.

const isConfirmed = confirm('정말 삭제하시겠습니까?')

사용자가 확인을 누르면 true, 취소를 누르면 false가 들어간다.

if (!isConfirmed) {
  return
}

취소를 누른 경우에는 return으로 함수를 바로 종료한다.

즉, 아래에 있는 삭제 로직은 실행되지 않는다.

 

filter로 삭제할 메모 제외하기

실제 삭제는 filter()를 사용했다.

const nextMemos = memos.filter((memo) => {
  return memo.id !== id
})

처음에는 이 부분이 헷갈릴 수 있다.

filter()는 배열을 하나씩 돌면서 조건이 true인 요소만 새 배열에 남긴다.

return true  → 남긴다
return false → 제외한다

그래서 이 조건은 다음처럼 읽을 수 있다.

memo.id !== id

현재 검사 중인 memo의 id가
삭제하려는 id와 다르면 남긴다.
같으면 제외한다.

예를 들어 메모 배열이 이렇게 있다고 하자.

[
  { id: 1, title: 'A' },
  { id: 2, title: 'B' },
  { id: 3, title: 'C' }
]

id가 2인 메모를 삭제하려고 할 때 조건은 다음과 같다.

memo.id !== 2

검사 결과는 이렇게 된다.

id 1 → 1 !== 2 → true  → 남김
id 2 → 2 !== 2 → false → 제외
id 3 → 3 !== 2 → true  → 남김

그래서 결과 배열은 다음과 같다.

[
  { id: 1, title: 'A' },
  { id: 3, title: 'C' }
]

이 배열을 nextMemos라고 이름 붙였다.

 

setMemos로 state 변경하기

삭제된 새 배열을 만든 뒤에는 setMemos()를 호출했다.

setMemos(nextMemos)

이 코드가 실행되면 React가 memos state를 새 배열로 교체한다.

그리고 state가 바뀌었기 때문에 React가 자동으로 컴포넌트를 다시 렌더링한다.

흐름은 다음과 같다.

setMemos 실행
→ memos state 변경
→ React가 App 컴포넌트 다시 실행
→ memos.map 부분 다시 실행
→ 삭제된 메모가 빠진 목록이 화면에 출력

즉, JavaScript에서 직접 호출하던 renderMemos()가 필요 없다.

 

삭제 버튼 연결하기

삭제 함수만 만들면 아직 화면에서 실행되지 않는다.

각 메모 카드에 삭제 버튼을 추가하고, 클릭하면 해당 메모의 id를 넘기도록 했다.

{memos.map((memo) => (
  <div className="memo-card" key={memo.id}>
    <h3>{memo.title}</h3>
    <p>{memo.content}</p>
    <button type="button" onClick={() => handleDeleteMemo(memo.id)}>
      삭제
    </button>
  </div>
))}

여기서 중요한 부분은 다음 코드다.

onClick={() => handleDeleteMemo(memo.id)}

이 코드는 삭제 버튼을 클릭했을 때 handleDeleteMemo()를 실행한다.
그리고 현재 메모의 id를 넘긴다.

첫 번째 메모의 삭제 버튼 클릭
→ 첫 번째 memo.id 전달

두 번째 메모의 삭제 버튼 클릭
→ 두 번째 memo.id 전달

 

왜 바로 실행하면 안 되는가

처음 보면 이렇게 쓰고 싶을 수 있다.

onClick={handleDeleteMemo(memo.id)}

하지만 이렇게 쓰면 클릭했을 때 실행되는 것이 아니라, 렌더링되는 순간 바로 실행된다.

그래서 함수로 감싸야 한다.

onClick={() => handleDeleteMemo(memo.id)}

이렇게 쓰면 React에게 다음과 같은 의미가 된다.

지금 실행하지 말고,
클릭했을 때 이 함수를 실행해라.

이 부분은 이전에 addEventListener에서 함수를 등록했던 개념과 비슷하다.

 

현재 전체 코드 흐름

현재 메모 목록 출력 부분은 다음과 같은 구조가 되었다.

{memos.length === 0 && (
  <p className="empty-message">아직 작성된 메모가 없습니다.</p>
)}

{memos.map((memo) => (
  <div className="memo-card" key={memo.id}>
    <h3>{memo.title}</h3>
    <p>{memo.content}</p>
    <button type="button" onClick={() => handleDeleteMemo(memo.id)}>
      삭제
    </button>
  </div>
))}

메모가 없으면 빈 메시지를 보여준다.
메모가 있으면 memos.map()으로 메모 카드를 출력한다.

각 메모 카드에는 삭제 버튼이 있고, 삭제 버튼은 자기 메모의 id를 handleDeleteMemo()로 넘긴다.

이번 단계에서 이해한 핵심

이번 삭제 기능에서 가장 중요한 점은 React의 렌더링 흐름이다.

React에서는 DOM을 직접 삭제하지 않는다.

Vanilla JavaScript에서는 이런 식으로 생각했다.

삭제 버튼 클릭
→ DOM 요소 삭제
→ 화면 갱신

React에서는 이렇게 생각해야 한다.

삭제 버튼 클릭
→ state 배열에서 데이터 제거
→ setMemos로 state 변경
→ React가 state를 기준으로 화면을 다시 그림

즉, React에서는 화면이 기준이 아니라 데이터가 기준이다.

화면을 직접 지우는 것이 아니라
데이터에서 지우면
화면은 React가 알아서 바꾼다.

 

정리

이번 단계의 핵심은 삭제 기능 자체보다 React에서 삭제를 바라보는 방식이다.

Vanilla JavaScript에서는 화면에서 직접 요소를 제거하거나, renderMemos()를 직접 호출했다.

React에서는 memos state에서 삭제할 데이터를 제외한 새 배열을 만들고, setMemos()로 상태를 바꾼다.

const nextMemos = memos.filter((memo) => {
  return memo.id !== id
})

setMemos(nextMemos)

그러면 React가 변경된 memos state를 기준으로 화면을 다시 렌더링한다.

즉, React에서는 화면을 직접 수정하는 것이 아니라 state를 수정해서 화면이 바뀌게 만든다.