Styled Components

CSS-in-Js란?

CSS-in-JS는 JavaScript 코드 내에서 스타일을 정의하고 관리하는 방식을 말합니다. 전통적인 방식으로는 스타일을 별도의 CSS 파일에 작성하고 HTML 파일에서 그 CSS 파일을 참조하는 방식이었지만, CSS-in-JS는 이러한 분리된 방식 대신 JavaScript 코드 내에서 스타일을 정의합니다.

styled-components란?

styled-components는 React 애플리케이션에서 사용되는 CSS-in-JS 라이브러리 중 하나입니다. 이 라이브러리는 JavaScript 파일 내에서 컴포넌트 스타일을 정의하고 관리할 수 있게 해주며, 동적인 스타일링, 컴포넌트 캡슐화, 효율적인 스타일 관리를 위한 강력한 도구들을 제공합니다.

설치

npm install styled-components
yarn add styled-components

간단하게 개념 알아 봤고 바로 코드로 넘어가자.

const BoxBoderColor = styled.div`
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid ${(p) => p.borderColor};
  display: flex;
  justify-content: center;
  align-items: center;
`;

<BoxBoderColor borderColor="red">박스</BoxBoderColor>
<BoxBoderColor borderColor="green">박스</BoxBoderColor>
<BoxBoderColor borderColor="blue">박스</BoxBoderColor>

해당 스타일은 백틱 안에 작성되며, JavaScript 표현식을 사용하여 동적 스타일을 설정할 수 있다.

const Button50px = styled.button`
  width: 50px;
  height: 50px;
  color: ${(p) => p.color};
  margin: 10px;
`;

<Button50px color="black">버튼</Button50px>
<Button50px color="green">버튼</Button50px>
<Button50px color="red">버튼</Button50px>

동일한 방식으로 버튼에도 적용해 봤다.

마무리

styled components에서 스타일을 동적으로 설정하기 위해 props를 사용 한다. 이는 JavaScript의 템플릿 리터럴 문법과 함께 사용되어 동적으로 스타일을 결정하거나 조건부로 스타일을 변경하는 데 유용하다.