728x90
리액트에서 key를 할당해도 해결 안되는 문제.
Warning: Each child in an array or iterator should have a unique “key” prop.
보통 react에서 위 에러가 뜨면 key를 할당해 해결해 주면 된다. 흔하기도 하고 간단하게 해결할 수 있는 워닝이다.
그런데 key를 할당해도 여전히 같은 에러가 떴다.
key 값을 map의 index를 줬다가, index는 쓰지 말라고 해서 유니크한 값을 줬는데도 해결되지 않았는데..
결국 아래처럼 해서 해결했다.
[해결]
<>
<Box key={index}> 내용 </Box>
</>
[원인]
감싸는 코드<> </>가 key보다 더 상위로 인식되어서 제대로 인식 되지 않아 발생한 문제였다.
<> 대신 <div> 같은걸로 바꿔서 key를 할당해 주면 해결된다.
<Wrapper key={index}>
<Box> 내용 </Box>
</Wrapper>
728x90
'💎 리액트' 카테고리의 다른 글
리액트 useEffect() 사용법 (0) | 2022.03.03 |
---|---|
리액트 검색기능 구현 (스프링부트, 리액트 연동 쇼핑몰 검색 기능 구현) (0) | 2022.03.03 |
리액트 : 부모 컴포넌트에서 자식 컴포넌트 함수 호출하는 법 (0) | 2022.03.02 |
리액트 Component, render,constructor(props), props와 state 차이점 (0) | 2022.02.12 |
비동기방식 promise, await, async, axios 정리 (0) | 2022.02.12 |
댓글