style-components로 이미지 불러오기

 

 

 

<img src= "" alt= ""/>

 

 

이미지를 사용할 때 주로 위와 같이 사용하거나

 

 

<StTestImg />

const StTestImg = styled.img`

`

const StTESTiMG = styled.div`
 background-imgae : URL()
`

 

 

위와 같이 style-components를 사용하여 div, img 로 불러왔었는데 스타일링하기에는 불편함이 있었고 새로운 방법을 찾게 되었다.

 

 

🔹 styled-components 사용하여 이미지 불러오기 + 스타일링

 

const StImg = styled.img.attrs({
 src: "",
 alt: "",
})`
 width: 40px;
 height: 40px;
    ...
`

 

 

위와 같이 styled.img.attrs를 사용하게 되면, 원하는 이미지 src, alt를 이미지 태그와 동일하게 불러올 수 있고 별도의 스타일링도 쉽게 구현할 수 있어서, 코드가 효율적으로 보이는 장점이 있었다.

 

 

인라인 스타일로 코드를 작성하게 되면, return 이후의 코드를 보는데에 다소 비효율적인 측면이 있는 것 같았는데 해당 방법도 같이 사용하면서 리팩토링 더 해보기👌