[STYLED COMPONENTS] as 를 사용하여 element 교체하기

학습일 : 2023. 03. 28

---

컴포넌트의 태그를 바꾸고 싶은데 스타일은 바꾸고 싶지 않을 때

즉, 예를들어


이미 만들어준 <Btn> 컴포넌트를 버튼이 아닌 a태그로 쓰고 싶은 상황이라면?

---

<App.js>

두개의 같은 Login이라고 적힌 버튼 컴포넌트가 있다 (Btn 이라는 이름을 가진)

나머지 하나는 css 속성은 똑같지만

버튼이 아닌

a 태그로 만들고 싶다면 (즉 태그자체를 <button>    ===>    <a>   로 바꾸고 싶다면)

as를 사용하면 되는데

바꾸고 싶은 컴포넌트인 

두번째 <Btn> 안에

as="a" 라고 적어주면 된다

그리고 클릭시 이동시킬 주소를 적어주면 되는데

href="이동할주소" 라고 적어주면 된다.

 

 

전체 코드는 아래와 같다.

import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;

const Btn = styled.button`
  width: 3rem;
  height: 3rem;
  padding: 1rem;
  background-color: black;
  color: white;
`;

function App() {
  return (
    <Father>
      <Btn>Login</Btn>
      <Btn as="a" href="/">Login</Btn>
    </Father>
  );
}

export default App;

 

 

 

실행결과

개발자도구를 보면 오른쪽 애는 a태그가 되었음을 확인할 수 있다.