추가 기능과 삭제 기능에 대해 질문있습니다.

인프런 커뮤니티 질문&답변

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

메모 추가 및 제거 UI

작성

안녕하세요 강의 너무 잘 보고 있습니다. 공부를 하다가 궁금한점이 생겨서 질문을 드립니다.

메모를 추가 삭제 기능에서 처음에는 추가같은 경우에는....

const handleAddNote = () => {
  setNotes([...notes, {id: "", content: ""}])
}

이런식으로 ...notes로 기존 값에다가 id, content로 새로운 메모를 추가하는 기능으로 알고 있는데 나중에는...

// 새로운 캔버스
export function createCanvas() {
  const newCanvas = {
    title: uuid().substring(0, 4) + '새로운 린 캔버스',
    lastModified: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    category: '신규',
  };
  return canvases.post('/', newCanvas);

이런식으로 추가기능을 만들고 삭제도 filter를 이용을 하는데 나중에는

export async function deleteCanvas() {
  await canvases.delete(`/${id}`);
}

이런식으로 삭제 기능을 작성이 되었더라구요. 첫번째 코드들은 처음에는 추가, 삭제기능이 되지만 새로고침 후에는 다시 원래대로 나오고 두번째 코드들은 서버에서 추가, 삭제 기능을 만들어서 새로고침을 하면 실제로도 추가, 삭제 기능을 하게 되는 것인가요? 만약 그렇다면 첫번째 코드들은 새로고침을 하면 원대대로 되는데 왜 사용이 되는건지 궁금합니다.

react React-Context react-router tailwindcss react-query

답변 1

짐코딩

지식공유자

안녕하세요! 질문 잘 읽었습니다. 추가 기능과 삭제 기능의 차이점에 대해 설명해 드리겠습니다.

맞습니다. 두 코드의 주요 차이점은 데이터의 영속성(persistence) 에 있습니다.

첫 번째 코드 - 클라이언트 상태 관리

const handleAddNote = () => {
  setNotes([...notes, {id: "", content: ""}])
}

이 코드는 React의 상태(state)만 변경하는 코드입니다:

React 컴포넌트의 notes 상태에만 새 항목을 추가합니다
메모리에만 존재하므로 페이지를 새로고침하면 모든 변경사항이 사라집니다
서버와 통신하지 않고 클라이언트 측에서만 관리됩니다

두 번째 코드 - 서버와 통신

export function createCanvas() {
  const newCanvas = {
    title: uuid().substring(0, 4) + '새로운 린 캔버스',
    lastModified: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    category: '신규',
  };
  return canvases.post('/', newCanvas);
}

export async function deleteCanvas() {
  await canvases.delete(`/${id}`);
}

이 코드는 API 호출을 통해 서버와 통신합니다:

canvases.post와 canvases.delete는 서버 API 엔드포인트에 요청을 보냅니다
데이터가 서버의 데이터베이스에 저장되므로 새로고침 후에도 변경사항이 유지됩니다
HTTP 메서드(POST, DELETE)를 사용하여 서버의 데이터를 변경합니다

부드러운 족제비

작성한 질문수

전체 Q&A

질문하기