2022. 5. 28. 18:53ㆍ프론트엔드/React.js
styled는 전부터 사용하고 있었지만,
이번에 하는 프로젝트에 본격적으로 도입을 해볼겸 써봤다.
Styled-component란?
styled-component란 컴포넌트에 스타일을 적용해주는 패키지다.
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾
styled-components.com
기존에 HTML element에 id나 class를 지정한 다음
css파일에서 스타일을 지정했다면,
HTML element나 JSX에 style을 적용해서
새로운 컴포넌트를 만드는 것이다.
styled-component의 장점은?
우선 직관성이다.
기존에는 div를 겹겹이 쌓아놔서,
어디서부터 헤더고 어디서부터 바디인지 구분하기 어려웠다면,
컴포넌트 이름으로 직관적으로 구분할 수 있다.
// 기존
<div id="root">
<div class="header">
.....
</div>
<div class="body">
......
</div>
</div>
// styled-component
<Root>
<Header>
......
</Header>
<Body>
......
</Body>
</Root>물론 이게 styled-component의 장점은 아니다.
스타일 지정 없이도 그냥 이름만 바꿔서 컴포넌트로 만들어주면 되니까.
그렇지만 class나 id를 지정해주지 않아도 되는 점은 큰 장점이다.
둘째로, JSX내부에서 스타일이 지정 가능하다.
JSX또는 HTML파일과 CSS파일을 분리해서 관리하는 것은 좋은 방법일수 있지만,
CSS파일이 1000줄가량 넘어가면 구분이 어렵다.
그리고 어디서 이 클래스나 id를 호출하는지도 알기 어렵다.
하지만 styled-component로 생성하면,
레퍼런스 체크가 쉬워진다는 장점이 있다.
주의할 점
기존의 JSX element는 style을 camelcase로 받는다.
하지만 styled component는 기존의 CSS 문법인 kebap case를 사용한다.
// JSX
<div style={{ marginTop: 10 }}>
// styled
const Header = styled.div`
margin-top: 10px;
`'프론트엔드 > React.js' 카테고리의 다른 글
| Next.js 13 - App Router (0) | 2023.08.10 |
|---|---|
| 컴포넌트 기능 관리에 대한 고찰 (0) | 2023.08.06 |
| React Sub-component 체험기 (0) | 2022.05.28 |
| React에서 귀여운 MetaMask 로고 넣는 과정 (0) | 2022.05.18 |
| React 공식 문서 읽기 - 3회: 주요 개념(3) (0) | 2022.05.17 |