originData.id 대신 useParams로 받은 id를 사... - 인프런

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.17) 웹 스토리지 이용하기

originData.id 대신 useParams로 받은 id를 사용하여 삭제하면 안되는 이유

해결된 질문

작성

169

LocalStorage 사용 강의의 16분 50초 부근 "삭제하기" 버튼 관련 질문입니다.

처음에 혼자 구현을 하려고 할 때 originData.id 대신 id를 onRemove에 파라미터로 전달했을 때 작동이 안됐는데 originData.id로 해야 삭제되더라고요. 콘솔로 찍었을 때 둘 다 일기 데이터의 id로 같은 걸 가리키는 것으로 나오는데 제가 잘못 알고 있는 부분이 있을까요? 안되는 이유가 무엇인가요?

const handleDelete = () => {
    if (window.confirm("정말 삭제하시겠습니까?")) {
      console.log(id);
      console.log(originData.id);
      onRemove(originData.id);
      navigate("/", { replace: true });
    }
  };

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

originData.id가 아닌 id를 사용하셨다는 말씀은, Edit 컴포넌트에서 DiaryEditor 컴포넌트에 Props로 useParams로 불러온 id를 넘겨주셨다는 말씀이시죠?

그렇게 해도 문제없이 잘 수행되어야 하는데 이상하네요! 혹시 코드를 보내주실 수 있으실까요?

깃허브나 코드샌드박스를 통해 보내주시면 감사하겠습니다.

ymj0580

질문자

혹시나 해서 AI 인턴이 말한대로 id에 parseInt를 적용해주었더니 잘 삭제됩니다! 😅 감사합니다~~!!

이정환 Winterlood

지식공유자

아! 문자열 형 변환이 이루어지지 않아 발생한 문제였군요! 해결하셨다니 다행입니다

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

ymj0580님, LocalStorage 사용 강의에서 “삭제하기” 버튼 구현 관련 질문 주셨군요. originData.id와 useParams로 받은 id가 동일하다고 나오지만 삭제가 안 되는 경우가 발생할 수 있습니다. 이는 주로 다음과 같은 이유 때문일 수 있습니다.

타입 불일치: JavaScript에서는 "123"(문자열)과 123(숫자)이 다릅니다. id와 originData.id의 타입이 일치하는지 확인해 보세요.
비동기 처리: LocalStorage에서 데이터를 읽어오는 과정이나 컴포넌트의 상태가 비동기적으로 업데이트되는 경우 id 값이 예상한 시점에 제대로 반영되지 않을 수 있습니다.
상태 관리 이슈: originData와 id가 각각 다른 상태 관리 로직으로 관리되고 있을 경우, 둘 사이의 상태 동기화가 제대로 이루어지지 않아 문제가 발생할 수 있습니다.

주어진 코드만으로는 정확한 원인을 파악하기 어렵기 때문에 상황에 따라 다른 가능성도 고려해야 할 수 있습니다. 더 자세한 문제 해결을 위해서는 해당 강의 내용을 확인하거나, 보다 상세한 코드 상황을 같이 살펴봐야 할 것 같습니다. 혹시 추가적인 문의가 있으시다면 코스의 Q&A 세션을 활용하거나 아래의 ‘문의하기’를 통해 질문해 보시는 것도 좋을 것 같습니다.

원하는 답변을 찾지 못하셨나요?
그럼 우측 하단의 ‘문의하기’ 에서 직접 문의해주세요.
최대한 빠르게 답변드리도록 하겠습니다!

감사합니다.

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

originData.id 대신 useParams로 받은 id를 사용하여 삭제하면 안되는 이유