NextJS 에서 map method 문제

버들비·2020년 11월 1일
0

.map 메소드 사용시 렌더링할 요소에 key 값을 안넣어주면 렌더링이 안된다.

{array.map((element) => {
	<div>{element}</div>
	})}

위와 같은 경우 array 안의 요소들이 렌더링되지 않는다.

{array.map((element, index) => {
	<div key={index}>{element}</div>
	})}

위와 같이 key 에 index 를 할당하니 렌더링이 됐다.

기억하기론 react 에서 .map 메소드를 쓸때 key 값을 안줘도 경고 메시지만 뜨지, 런타임과 렌더링에는 아무런 문제가 없었는데.

next 공식 doc과 예제에서도 key 값을 반드시 넣어야 된다는걸 보지 못했다.

버그인건지 nextjs가 ver 9 가 되면서 규칙이 추가된건지.. 이런걸로 거의 만 하루를 삽질했다.

0개의 댓글