경고: validationDOMNesting(…): 의 후손으로 나타날 수 없다. 실수

by

Next JS를 사용하여 코드를 작성할 때 갑자기 다음과 같은 오류가 발생할 수 있습니다.

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>

이 문제가 발생하는 이유는 무엇입니까? HTML에서 잘못된 중첩이 발생할 때 발생합니다.

이 경우 a 태그 내에 a 태그가 중첩되어 있음을 의미합니다.

링크를 사용한 경우 이전에 a 태그를 공유하여 구현했습니다.

즉, Link 내에서 또 다른 a 태그를 사용하여 태그 역할을 했기 때문에 발생한 것입니다.

<Link>
	<a href="http://hseongchan2.m/...">...</a>
</Link>

or

<Link href="http://hseongchan2.m/...">
	<a>...</a>
</Link>

하지만 지금은 위와 같은 코드를 작성하지 않습니다.

이제는 태그를 사용하지 않고 링크만 처리하기 때문입니다.

그래서 아래와 같이 변경하면 더 이상 오류가 뜨지 않습니다.

'추천 관련글, 
<Link href="http://hseongchan2.m/...">
	...
</Link>

or

<Link href="http://hseongchan2.m/...">
	<div>...</div>
</Link>

styled-components를 사용한 구현에도 동일하게 적용됩니다.

const LinkStyle = styled.div`
	...
`

<Link href="http://hseongchan2.m/...">
	<LinkStyle>...</LinkStyle>
</Link>

styled.a~ 아니다 디자인된 다양한로 처리할