지난 포스팅에서 예고(?) 했던 대로, key prop 관련 트러블 슈팅에 대해 작성해본다.
문제 정의
아래 사진은 정상 작동하는 UI다.
(문제 상황을 남겨놓지 못해서 상황 설명을 돕기 위해 첨부..🥹)
생겼던 문제는 화살표 클릭 시 아래 화면과 같이 각 날짜에 해당하는 스케줄과 날짜를 출력해야 했는데, 날짜가 변경되지 않는 문제가 생겼다.
예를 들면, 6월은 30일까지 있으니까 날짜와 연결된 컴포넌트(Line)이 30개가 출력되어야 한다.
다음 화살표 클릭 시, 7월은 31일까지 있으니까 Line 컴포넌트 31개가 출력되어야 하는데, 여전히 30개가 출력되는 상황이었다.
사실 수집 & 원인 추론
1차 시도
- recoil을 통해 현재 월(month)을 전역으로 사용하고 있었다. 혹시 여기서 반영이 되지 않는 문제가 생긴 것은 아닐까?
- recoil을 통해 1년치 mock data를 저장하고 selector를 통해 한 달의 데이터를 보여주고 있었는데 여기에서 문제가 생긴 것은 아닐까?
1차 시도로는, 데이터의 문제라고 생각해서 전역 상태가 변경될 때마다 console을 찍어보았다.
하지만, data는 멀쩡하게 나오는데 UI만 변경되지 않는 문제임을 알 수 있었다.
Chat GPT를 통해 원인 발견
상태관리는 잘 되고 있는데 왜 UI 반영이 안될까? Chat GPT에게 물어보았다.
(개인 프로젝트이니 코드를 공유하고 문제를 물어봤다.)
위의 경우에는, 기존에 사용되던 key 값이 컴포넌트 배열에서 각 요소를 구별하기에 충분하지 않았기 때문에 UI 업데이트가 되지 않았을 수 있습니다.
= key 값이 유일하지 않아서 생긴 문제였다. key 값을 복잡한 값으로 변경해주었다.
// before
...
{data[monthStr(month)].map((item: IData) => {
return(
<Line
key={item.date}
date={item.date}
month={monthStr(month)}
emotion={item.emotion}
exercise={item.exercise}
planArray={item.schedule.plan}
workArray={item.schedule.work}
/>
)}
// after
{data[monthStr(month)].map((item: IData) => {
return (
<Line
key={`schedule-${monthStr(month)}-${item.date}-${item.emotion}-${item.exercise}`}
date={item.date}
month={monthStr(month)}
emotion={item.emotion}
exercise={item.exercise}
planArray={item.schedule.plan}
workArray={item.schedule.work}
/>
);
})}느낀점
key prop에 대한 중요성을 크게 느꼈다.
이전엔 key 값을 왜 넣는지 대충은 알았지만, 대충 넣으면 왜 문제가 되는지 느끼지 못했다.
이번 트러블 슈팅을 계기로 다시 key prop에 대해 정리할 수 있었고,
비슷한 문제가 발생하면 (데이터, state 문제가 아닌 경우 UI랜더링만 되지 않을 때) key값을 먼저 살펴보게 될 것 같다.
