styled-component와 사용이유
CSS-in-JS 중 대표적인 라이브러리 입니다.
css 파일을 따로 한곳에 모아서 적용을 하는 기존의 방식과는 달리, JS파일 내부에 컴포넌트와 css요소가 다같이 있는 모습이 인상적이었습니다.
익숙한 방식보다 styled-component를 사용하게 된 이유는, React로 웹페이지를 만들때, 더 이상 기본적인 html 마크업 기준이 아니라, 기능을 기본단위로 하는 컴포넌트 중심으로 전체적인 설계를 하게 되는데, 스타일 요소 역시 컴포넌트 내부에 같이 묶여있는 것이 효율적이라고 생각을 했기 때문입니다.
사용방법
- HTML 태그 스타일링:
const 이름 = styled.div - React 컴포넌트 스타일링:
const 이름 = styled(리액트 컴포넌트) - 가변 스타일링: 리엑트 컴포넌트에서 넘어온 props에 따라 서로 다른 스타일링을 할 수 있습니다.
props.프로퍼티방식으로 접근이 가능합니다.
La Dolce Vita🥂