본문 바로가기

FE

[Error : Warning: Each child in a list should have a unique "key" prop ]

728x90

코드

        <S.Grid>
          {mainCategory.map((category: Category) => (
            <S.Item>
              <img
                alt={`To ${category.title}`}
                loading="lazy"
                src={category.image}
              ></img>
              <S.Text>{category.title}</S.Text>
            </S.Item>
          ))}
        </S.Grid>

export default index;

리액트 환경에서 위와같이 작업중이었고 각 자식요소에 고유한 key 속성이 없다는 에러가 발생했다.

해당 에러가 발생해도 기능은 잘 작동했으나 어디가 잘못 됐는지 궁금했다.

원인

React는 위 코드에서 <S.Grid> 종속트리를 그대로 유지하는 대신 모든 자식을 변경(리렌더링)하게되는데 이는 비효율적인 일이고 이를 해결하기 위해 key속성이 존재하는 것이다. 즉, key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 비교하고 바뀐부분을 효율적으로 렌더링 할 수있게 된다.

다시말해 요소에 안정적인 고유성을 부여하기 위해 내부 엘리먼트에 지정하는 것이다. map 함수 내에서 key 사용시 index는 권장하지 않는데 이는 state관련 문제가 발생하고 순서가 바뀌게 되면 index도 바뀌기 때문이다.

해결

<S.Grid>
          {mainCategory.map((category: Category) => (
            **<S.Item key={category.id}>**
              <img
                alt={`To ${category.title}`}
                loading="lazy"
                src={category.image}
              ></img>
              <S.Text>{category.title}</S.Text>
            </S.Item>
          ))}
        </S.Grid>

통상적으로 사용하는 id를 부여해주어 에러를 해결했다.

728x90

'FE' 카테고리의 다른 글

프론트에서 Transaction을 ?  (0) 2024.05.23
[ Jest ] toBeCalledWith vs toEqual  (0) 2023.11.07