인프런 커뮤니티 질문&답변
작성한 질문수
trends key props error
작성
·
124
0
나를 위한 트랜드인 TrendSection 컴포넌트에서 계속 key가 없다고 에러를 내는 상황이 있어 살펴봤더니
trend.tagId가 react-query로 변경 이후엔 오지 않고 있다는 사실을 알게 되었습니다!
trend.title로 변경해서 해결했습니다~
before :
{TrendList?.map((trend) => (<Trend key={trend.tagId} trend={trend}/>))}after:
{data?.map((trend) => {
return <Trend key={trend.title} trend={trend}/>
})}swagger:
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
섬섬님의 문제 해결 방법에 대해 잘 읽었습니다.
key prop은 각 컴포넌트나 엘리먼트가 react에 의해 식별되고 트랙될 수 있게 합니다. 따라서 배열을 렌더링할 때 고유한 값을 key로 제공해야 합니다. react-query로 데이터를 가져오는 과정에서 해당 데이터의 구조가 변경되었다면 그에 맞게 key prop을 업데이트하는 것이 중요합니다. 섬섬님은 trend.tagId 대신에 trend.title을 key로 사용하여 문제를 해결하셨군요.
추가적으로 제공하신 swagger 이미지에 따르면, GET /api/hashtags/trends API 엔드포인트를 통해 얻은 데이터에서 title과 count 정보를 포함해 최대 10개의 항목을 받아온다는 사실을 확인할 수 있습니다. 이를 통해, 각 트렌드의 title은 유일할 가능성이 높으므로 key로 사용하기 적절한 것 같습니다.
노력한 결과로 문제를 해결하신 것을 축하드립니다! 혹시 추가적인 질문이 있으면 언제든 문의해주세요.