개발 도구 (Development Tools)/React

[React] styled-components 설치와 사용 방법

BiCute 2022. 5. 26. 10:00
반응형

 

설치 방법

npm install styled-components

 

  터미널을 열어 위 코드를 입력해주면 끝입니다.

 

  공식 페이지의 install 설명에는 --save옵션이 포함되어 있는데,

  --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미입니다.

 모듈이 추가되어 있지 않으면, 파일을 공유하거나 옮길 때 많게는 수백 메가에 달하는 node_moduls 폴더를 함께 옮겨야 하는데, dependency 항목에 모듈이 추가되어 있다면, 이 항목을 체크하면서 자동으로 관련된 모듈을 다운로드합니다.

  하지만 현제 release 되는 버전들은 --save 옵션이 기본 적용되어 있어 --save를 사용하지 않아도 자동으로 추가됩니다.

 

 

사용 방법

가져오기 (import)

import styled from 'styled-components'

  설치를 했으면 styled-components를 사용하기 위해 위와 같이 작성해 줍니다.

 

컴포넌트 만들기

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

 

  작성하는 방법은 위 예시를 기준으로 설명하면...

  (1) styled라는 변수를 작성한 후, button이라는 HTML tag를 작성 이렇게만 작성하면 해당 태그의 컴포넌트에 관한 스타일을 지정해 줄 수 있음.

  * button 뿐만 아니라 h2, div 등 모두 사용 가능

  (2) 해당 컴포넌트의 스타일은 백틱(``) 기호를 작성한 후 이후 CSS 작성하듯 스타일을 지정.

  (3) 이것을 변수에 담아(컴포넌트니깐 대문자로 시작) 원하는 위치에 사용하면 됨.

 

사용하기

<Button>Normal Button</Button>

 

  원하는 위치에 해당 컴포넌트를 삽입하면 끝.

 

 

 

장점 & 단점

 

공식 페이지에서 소개하고 있는 장점들은 다음과 같습니다

Automatic critical CSS

  페이지에서 랜더링 되는 구성요소를 추적하여 자동으로 해당 스타일만을 삽입 = 필요한 최소한의 코드를 로드함

No class name bugs

  고유한 클래스 이름을 생성하기 때문에 중복이나 철자 오류 같은 걱정할 필요가 없음.

Easier deletion of CSS

  클래스 이름이 사용되는 곳을 파악하기 쉽고, 구성요소가 사용되지 않거나(Tool이 감지) 삭제될 경우 해당 구성 요소의 모든 스타일도 함께 삭제됨

Simple dynamic styling

  심플한 동적 스타일링.

Painless maintenance

  구성 요소에 영향을 주는 스타일을 찾기 위해 다른 파일을 검색할 필요가 없어지므로 유지 관리가 손쉬움.

Automatic vendor prefixing
  vender prefix(공급업체 접두사)를 자동으로 처리해줌

 

대충 요약하자면 

  프로젝트들을 하나로 합치다 보면 스타일이 크면 클수록 어디에선가 중복이 발생하거나 꼬이기 시작하는데 styled-components는 다른 파일들의 스타일을 간섭하지 않는다는 것과 쓸데없는 것을 로딩하지 않기 때문에 페이지 로딩 속도를 단축할 수 있다는 점이 좋음.

※ 위에서 말한 스타일 간섭을 막는 방법은 [컴포넌트이름.module.css]로 작성해서 사용하면 해당 컴포넌트에만 css가 적용되기에 동일한 효과를 볼 수 있음

 

 

단점은...

  코드가 길어지기 때문에 매우 복잡해짐.

  공동 작업 시 상대방도 이에 관한 지식이 있어야 함.

  스타일 작성하는데 ${ props => props.color } 이게 뭐냐고 물어보기 시작하면 난감해짐.

 

 

 

추가적인 기능 사용방법

props를 이용한 컴포넌트 재활용

const Button = styled.button`
  color: ${ props => props.btnColor };
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button btnColor="red">Normal</Button>
    <Button btnColor="blue">Normal</Button>
  </div>
  );

  원하는 위치에 ${ props => props.작명 }을 하는 것으로 해당 컴포넌트를 사용할 때, 값을 바꿔가며 컴포넌트를 다른 스타일로 재활용할 수 있습니다.

 

props를 기반으로 한 간단한 조건 적용

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);

  위 예문처럼 3항 연산자를 이용하여 조건식을 지정해 줄 수도 있습니다.

  해당 요소가 있거나 특정 값이 props로 지정될 경우에 대하여 원하는 값으로 지정해 줍니다.

 

스타일 확장

const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

  기존 스타일을 유지하면서 몇 가지 요소를 추가하거나 할 경우,

  이전 컴포넌트를 지정하고 추가 CSS만 작성하는 것으로 새로운 컴포넌트를 만들 수 있습니다.

 

 

 

styled-components 더 알아보기 >

반응형