[TIL] Day 70 map을 사용할 때 key를 할당했지만 계속 오류가 뜬다

2024.01.12 금

 

문제 상황

기능적인 면에서는 문제 없이 잘 작동을 한다.

하지만 콘솔창에 오류인듯 경고가 뜨는 상황이다.

경고인 부분에서 큰 오류는 아닌 것 같지만, 의도한 바는 아니기에 해결하려고 한다.

 

 

오류 코드

 

Warning: Each child in a list should have a unique "key" prop.

 

 

오류 분석

해당 오류는 map을 돌릴 때 최외곽 태그에 key가 없어서 발생하는 것으로 보인다.

map을 활용할 때는 꼭 개별적인 key를 부여해줘야 정확하게 인식을 하나보다.

이 사실을 알고 있어서 컴포넌트에 key를 넣어줬지만 계속해서 오류가 떠있는 모습이다.

 

사실 이전에도 해당 오류를 본 적이 있다.

그때도 똑같이 기능적으로는 문제가 없었고, key도 잘 부여를 해줬었다.

경고 부분이라서 크게 신경쓰지 않고 넘었갔었다.

하지만 이번에는 정확하게 원인을 알고 해결해보려고 한다.

 

기존 코드

// 이슈
{interest?.map((item, index) => {
          return (
            <> 
              <div
                key={index} //여기에 key 부여함
                className="border-[2px] border-solid border-white px-[0.63rem] py-[0.25rem] text-white bg-slate-300/50 rounded-[1rem] text-[0.8125rem] font-semibold"
              >
                {item}
              </div>
              <FlirtingModal flirtingUserUid={flirtingUserUid} nextCardBtn={nextCardBtn} />
            </>
          );
        })}

 

 

트러블슈팅

최외곽은 의미가 없은 <></>가 있어서 key를 넣어준 부분이 최외곽인줄 알았지만,

사실 <></> 이 태그도 로직에 영향을 주고 있었다.

따라서 해당 부분에 key를 넣으면 된다.

 

 

빈 태그에는 key를 입력할 수 없다

<></> 해당 태그에 입력하려고 하니 들어가지 않는다.

그래서 div 태그로 만들려고 하다가 다른 곳에 영향을 주지 않도록 span 태그로 만들어서 key를 적었다.

 

 

Fragment 태그를 활용하자

이런 상황일 때 빈 태그 대신 활용할 수 있는 태그를 React에서 제공한다. 바로 Fragment 태그.

이를 통해 단일 요소가 필요한 상황에서 래핑하여 그룹화 할 수 있다.

요소를 그룹화해도 DOM에는 영향을 주지 않는다.

그래서 빈 태그에 Fragment을 적고 key를 할당해줬다.

 

https://react.dev/reference/react/Fragment

<Fragment> (<>...</>) – React

 

수정 코드

// 해결
{interest?.map((item, index) => {
          return (
            <Fragment key={index}> //Fragment 태그에 key 부여
              <div
                key={index}
                className="border-[2px] border-solid border-white px-[0.63rem] py-[0.25rem] text-white bg-slate-300/50 rounded-[1rem] text-[0.8125rem] font-semibold"
              >
                {item}
              </div>
              <FlirtingModal flirtingUserUid={flirtingUserUid} nextCardBtn={nextCardBtn} />
            </Fragment>
          );
        })}

 

 

매우 기본적인 내용의 오류일 수도 있겠다.

혹은 React를 처음 배웠을 때 알았을수도 있는 내용이다.

그러나 그때는 중요성을 잘 몰랐고, 해당 오류를 만나고 해결 방법을 찾아보면서 그 쓰임새를 알 수 있었다.

이렇게 하나씩 내것으로 만들고 다음에 잘 적용할 수 있다면 성공이다!