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

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

수정 버튼에서 오류가 발생한다면 수정 버튼이 렌더링 되고 있는 파일의 코드를 확인하시면 됩니다. 강의와 동일하게 진행하셨다면 src/pages/diary.js의 Diary 컴포넌트 안에 다음과 같이 작성되어 있을겁니다.

그럼에도 문제가 발생한다면 코드를 살펴봐야 하는데요

프로젝트 진행 도중 발생하는 오류는 전체 코드를 확인해야 그 원인을 정확히 파악할 수 있습니다.

질문 가이드라인을 확인하셔서 전체 프로젝트 코드를 깃허브 또는 구글 드라이브 링크로 전달해 주시면 살펴보겠습니다.

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

수정 버튼을 클릭했을 때 의도한 Edit 화면 대신 이전 번호가 호출되는 문제는 주로 라우팅 설정이나 관련 코드에서의 오류에 기인할 수 있습니다. 이러한 문제를 해결하기 위해 다음 사항들을 점검해 보시기 바랍니다:

1. Router 설정 확인:

   • react-router-dom을 사용 중이시라면, Route 설정 부분에서 /edit/:id 경로가 올바르게 지정되어 있는지 확인하시기 바랍니다. Edit 페이지로 이동할 때 파라미터를 정확히 전달받고 있는지 점검해주세요.
     

2. Link 또는 Navigate 사용:

   • 수정 버튼의 링크 또는 navigate 설정이 Edit 페이지로 정확히 연결되어 있는지 확인합니다. 예를 들어, navigate(/edit/\({id}`)` 또는 `Link to={`/edit/\){id}}와 같은 방식으로 구성되어야 합니다.
     

3. ID 값 전달 확인:

   • Edit 페이지에 올바른 ID가 전달되고 있는지, 그리고 해당 ID가 존재하는 데이터와 연결되어 있는지 확인하세요. ID가 없거나 잘못된 경우, 잘못된 페이지로 연결될 수 있습니다.
     

4. 실제 코드 점검:

   • 만약 위의 방법으로 해결되지 않는다면, 전체 코드를 살펴보는 것이 도움이 될 수 있습니다. 관련된 코드의 불일치나 오타가 문제를 일으킬 수 있습니다.
     

유사한 문제에 대한 질문과 답변이 있었으니, 아래 링크를 참조하셔서 추가적인 해결방법을 찾으시는 것도 좋습니다:
- 리액트 라우팅 오류 및 해결 방법

문제를 해결하시는데 도움이 되기를 바라며, 추가적인 궁금증이 있으면 언제든지 질문해 주세요. 무언가 추가적인 도움이 필요하시다면, 코드를 포함해서 더 구체적인 상황을 알려주시면 더욱 효과적인 도움을 드릴 수 있을 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

import { getEmotionImage } from "../util/get-emotion-image";
import Button from "./Button";
import "./DiaryItem.css";
import { useNavigate } from "react-router-dom";

const DiaryItem = ({ id, emotionId, createdDate, content }) => {
  const nav = useNavigate();

  return (
    <div onClick={() => nav(`/diary/${id}`)} className="DiaryItem">
      <div className={`img_section img_section_${emotionId}`}>
        <img src={getEmotionImage(emotionId)} />
      </div>
      <div onClick={() => nav(`/diary/${id}`)} className="info_section">
        <div className="created_date">
          {new Date(createdDate).toLocaleDateString()}
        </div>
        <div className="content">{content}</div>
      </div>
      <div className="button-section">
        <Button onClick={() => nav(`/edit/${id}`)} text={"수정하기"} />
      </div>
    </div>
  );
};

export default DiaryItem;