React / The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value.

- 주어진 상황 😢

리액트 앱에서 <a> 태그를 사용해서 테스트를 통과할 필요가 있었음.

 let addThumbnail = images.map( (image)  => {
      return (<a key={image.id}>
        <Thumbnail />
      </a>
      )
    })

 

- 만난에러😈

테스트는 통과가 되나 콘솔창에 이게 뜸

The href attribute is required for an anchor to be keyboard accessible.
Provide a valid, navigable address as the href value.

 

- 원인 👌

<a> 태그 사용시 하이퍼링크의 유효한 값이 필요하다는 것. 

 

- 해결과정 🧵

let addThumbnail = images.map( (image)  => {
      return (<a key={image.id} href='#!'> // href링크를 '#!'로 걸어줌
        <Thumbnail />
      </a>
      )
    })

유효한 링크로 걸어도 됨!

 

 

- 느낀점 😀

<a> 태그의 뜻과 사용법을 좀 더 정확히 알았으면 좋았겠다. (하이퍼링크를 걸어주는 태그니 이동할 hypertext reference가

필요하겠지?)

 

- 참조

 

https://reference-m1.tistory.com/306