문제상황

• 경고 메시지 발생
  • 터미널: "Warning: <a> cannot appear as a descendant of <a>"
  • 렌더링: 정상 작동
  • ESLint: 경고 표시
• 문제의 코드

<div>
  <Link to='/'>
    <Button>회원</Button>
  </Link>
  <Link to='/'>
    <Button>비회원</Button>
  </Link>
</div>

상황 파악

• 원인
  • Link 컴포넌트와 Button 컴포넌트가 모두 <a> 태그 역할 수행
• 확인 방법
  • Link 또는 Button 컴포넌트 제거 시 오류 해소 확인

해결 방안

• 해결 코드

<Buttons
  as={Link}
  to={"/signup"}
  color="orangeDeep"
  background="orangeLight">
  회원가입
</Buttons>

• 해결 방식

  

  • as 속성 사용: 특정 컴포넌트처럼 동작하도록 설정
  • Buttons: 조건에 따라 색상 변경 가능한 커스텀 컴포넌트 생성
  • Link 컴포넌트 삭제: 경고 메시지 해소

추가 사항

• 앤트디자인 Button 컴포넌트 사용 시

  • Link 컴포넌트 삭제
  • Button에 href 속성 추가로 Link 기능 구현

• as 속성

  

  • styled 공식 문서에서 확인된 유효한 속성
  • Buttons 컴포넌트: button 태그로 수정
  • as 속성을 통해 Link 기능 및 style 속성 적용