프로젝트 상세 조회 시 UI에 데이터가 표시되지 않는 문제

1. 문제 상황

프로젝트 상세 조회 API를 호출한 후, 응답 데이터가 정상적으로 반환되고 setProject(res.data);를 통해 상태를 업데이트했지만, 화면(UI)에는 데이터가 표시되지 않는 문제가 발생하였다.

2. 문제 원인 분석

• API 응답을 확인한 결과, res.data의 구조는 다음과 같았다.

  {
    "resultCode": "200",
    "message": "프로젝트 단건 조회가 완료되었습니다.",
    "data": {
      "projectId": 36,
      "name": "이세연",
      "startDate": "2025-03-04",
      "endDate": "2025-03-05",
      "memberCount": 1
    }
  }

• 기존 코드에서 setProject(res.data);로 상태를 설정했기 때문에, project의 상태 구조가 다음과 같아졌다.

  {
    resultCode: "200",
    message: "프로젝트 단건 조회가 완료되었습니다.",
    data: {
      projectId: 36,
      name: "이세연",
      startDate: "2025-03-04",
      endDate: "2025-03-05",
      memberCount: 1
    }
  }

• 그러나, UI에서는 project.name, project.startDate와 같은 방식으로 데이터를 출력하려고 하였고, 실제로 name 값은 project.data.name에 존재하였다.
• 즉, project.name을 참조하려 했으나 undefined가 반환되었기 때문에 화면에 아무것도 출력되지 않았다.

3. 해결 방법

• setProject(res.data.data);로 변경하여 data 내부의 객체만 저장하도록 수정하였다.

  setProject(res.data.data);

• 이렇게 변경한 후, project의 상태 구조는 다음과 같이 변경되었다.

  {
    projectId: 36,
    name: "이세연",
    startDate: "2025-03-04",
    endDate: "2025-03-05",
    memberCount: 1
  }

• 이제 project.name, project.startDate 등 UI에서 참조하는 속성들이 올바르게 매칭되었고, 정상적으로 화면에 표시되었다.

4. 결론

• API 응답에서 불필요한 resultCode, message까지 포함하여 상태를 저장하면, UI에서 데이터를 참조할 때 예상치 못한 문제가 발생할 수 있다.
• setProject(res.data.data);와 같이 API 응답에서 실제 필요한 데이터만 상태에 저장해야 한다.
• 이를 통해 project.name, project.startDate 등의 속성을 UI에서 바로 사용할 수 있게 되었고, 정상적으로 데이터가 렌더링되었다. 🚀