2차 스터디 - 프로젝트 셋팅 및 라이브러리 설치(2) styled-components

 

오늘은 개인 프로젝트에서 사용할 라이브러리 설치 방법에 대해 마저 정리하려고 한다.

 

1. styled-components

CSS-In-Js라고 불리며, 이 뜻은 말 그대로

CSS 코드를 자바스크립트 안에서 관리하는 하겠다는 의미이다.

CSS 코드를 마치 자바스크립트 객체형식으로 정의하여 사용한다는 말인데,

그중 대표적인 CSS-in-JS 라이브러리로는, styled-components와 emotion 등이 있다.

나는 styled-components를 사용해보려고 한다.

 

설치방법

$ npm i styled-components

명령어를 입력하면 자동으로 설치된다.

 

설치 후에 package.json에 styled-components가 추가된 것을 확인할 수 있다.

 

{
  "dependencies": {
    "styled-components": "^6.1.1"
  }
}

2. 동작방식

import styled from "styled-components";

동작 방식은 이렇게 header부분에 이런 식으로 import 해준다.

 

const StyledButton = styled.button`
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;
  color: gray;
  background: white;
`;

function Button {
  return <StyledButton>버튼</StyledButton>;
}

이런 식으로 

`styled.tagName` 형태로 새로운 객체를 만들고, 원하는 스타일을 작성한다

이를 JSX 구문에서 바로 사용하면 된다고 한다.

 

여기서 StyledButton라고 선언해 준 뒤 styled.tagName 후 백틱 `` 을 사용해 css를 작성해 주면 된다.

 

그 후 적용하고 싶은 곳에서  StyledButton 선언해 주면 CSS-module을 사용하는 것처럼 적용된다고 한다.

 

 

 

(나는 tailwind CSS도 사용해 보고, styled-components 컴포넌트도 사용해 봤지만 개인적으로 styled-components가 더 편하다고 생각한다. 내 기준으로는 코드 가독성이 좋고, 관리하기도 편하다고 생각 든다.

하지만 단점도 있다고 한다. styled-components의 단점으로는 번들 크기를 늘리고 런타임 오버헤드를 증가시킨다고 한다. 여기서 오버헤드(overhead)는 추가적으로 드는 시간, 메모리, 자원 등을 의미한다.

어쨌든 그러한 이유로 나는  styled-components를 한 번 더 사용해보고 싶었다.)

 

이렇게 개인 프로젝트의 기본세팅을 끝낸 거 같다.

내일부터는 직접적인 구현을 시작할 예정이다. 물론 기본교육도 차근히 들어가면서 배우는 기능을 채워나 가볼 예정이다!

 

 #엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript