Styled-Components 스타일 컴포넌트

phoenix·2021년 9월 25일
0

What is Styled-Components?

Styled-components는 라이브러리이다!

프로젝트를 진행 하다가 컴포넌트 파일이 많아지면 CSS를 작성할때 한곳에 다 몰아서 넣으면 많은 고충이 있다

예를들어 중복된 className이 사용 될 수가 있다. 그래서 이러한 실수를 방지하기위해 컴포넌트와 CSS를 합쳐 사용하는게 바로 Styled-Components이다

Styled-Components는 CSS in js라고도 불린다 왜냐하면 스타일링을 따로 CSS 파일을 생성해서 하는게 아니라 js 안에서 작성 하기 때문이다.

let Box = styled.div`
	padding : 20px;
`;

이렇게 쓰게 되면 padding이 20px인 div tag가 생성된것이다

이렇게 생성된 div tag를 사용 하는 방법은

컴포넌트 안에서

<Box>안녕하세요</Box>

이렇게 사용한다 이것의 장점은 클래스명을 사용을 안한다는 것이다!

개발자들이 가장 고민하는 것 중에 하나가 바로 클래스명 작명인데 이것이 작명의 고통으로부터 많은 개발자들을

조금이나마 자유롭게 해주는거 같다!

Styled-components docs : https://styled-components.com/docs/basics

profile
phoenix

0개의 댓글