스타일드 컴포넌트 사용법 (Styled-Components)

스타일드 컴포넌트(Styled-Components)

 

React에서 스타일링을 쉽게 할 수 있도록 도와주는 CSS-in-JS 라이브러리!

스타일드 컴포넌트를 사용하면 컴포넌트에서 스타일을 정의하고

자바스크립트 코드 내에서 CSS를 작성하는 방식으로 동작해유

 

 

특징

 

• CSS와 JS의 결합: CSS 코드가 JS안에 포함되고  스타일과 로직을 하나의 컴포넌트로 관리할 수 있음
• 동적 스타일링: props나 상태에 따라 스타일을 동적으로 변경할 수 있어 유연한 스타일링이 가능함
• 자동 클래스명 생성: 고유한 클래스명을 자동으로 생성해주어 클래스명 충돌 문제를 방지할 수 있음

 

 

사용법

 

 

설치

npm install styled-components

 

스타일드 컴포넌트를 설치하슈

 

 

 

사용예제

 

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

function App() {
  return <Button> Button </Button>;
}

 

 

태그를 변수처럼 사용하고 그 안에서 속성 값을 할당합니다.

이처럼 스타일드 컴포넌트는 스타일과 로직을 결합하여 관리하기 쉬운 코드를 만들 수 있습니당

 

 

 

마무리

 

지금껏 CSS 만 사용해와서 스타일 자체를 변수처럼 저장하고 속성 값을 할당한다는게 이해가 되질 않았는데

 

스타일드 컴포넌트를 찾아보면서 이해할 수 있었고 되게 신기했다 늘 HTML태그를 거의 div만 사용해왔어서

 

스타일드 컴포넌트를 사용하면 시맨틱 태그까진(?) 아니더라도 보다 태그를 더 명시적으로 사용할 수 있지 않을까 싶다! 끝