TIL 24 | styled-components

6933 단어 ReactTILReact

Styled-Component

Styled Component 는 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하였다. Styled Component 를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다.
우리가 기존에 학습한 JavaScript (React) & CSS 와 크게 다르지 않다. JavaScript에서 변수를 선언하듯이(혹은 React 에서 컴포넌트를 만들듯이) Button 을 만들고, tag 의 속성을 정의하고 (여기서는 a tag), back-ticks (``) 안에 기존 CSS 문법을 이용하여 스타일 속성을 정의해 주면 된다.

Styled-Component 코드의 예시

const Button = styled.a`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
`;

styled-components의 특징

  • Automatic critical CSS
    Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입합니다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있습니다.

  • No class name bugs
    Styled Component 는 스스로 유니크한 className 을 생성합니다. 이는 className 의 중복이나 오타로 인한 버그를 줄여줍니다.

  • Easier deletion of CSS
    기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기위해 CSS 파일 안의 className을 이리저리 찾아야 했습니다. 하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제됩니다.

  • Simple dynamic styling
    className을 일일이 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적입니다.

  • Painless maintenance
    컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않습니다.

  • Automatic vendor prefixing
    개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐입니다. 이외의 것들은 Styled Component 가 알아서 처리해 줍니다.

작업하다가 컴포넌트가 20~30개가 넘어가게 되면 className이 겹친다던지, 그로인해 갑자기 다른 이상한 컴포넌트에 원하지 않는 스타일이 적용 될 수도 있다. 이런 경우 하나하나 찾아가면서 className도 고치고, 삭제하고 수정하고.. 많은 불편함이 따른다.
styled-components를 사용하면 이런 불편함을 해소 할 수 있다.

사용법

  1. 터미널에 입력해서 styled-components를 설치해 준다.

    yarn add styled-components
    npm install styled-components

  2. 상단에 import를 해준다.

import styled from 'styled-components'
  1. style-components 문법을 이용해준다.
//box라는 이름을 가지고, padding 20px을 가진 div 이다.
let Box = styled.div`
  padding : 20px;
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/> 
      <Box></Box> 
    //이런식으로 component처럼 사용해 주면 된다. 끗.
    </div>
  )
}
  1. props를 전달해서 사용 할 수도 있다.
    비슷한 스타일을 가진 제목 테그가 필요한데, 글자색만 다르게 필요하다면? props를 전달해서 사용해보자.
    "" , { } 를 사용해서 전달해 줄 수 있다.
let 제목 = styled.h4`
  font-size : 25px;
  color : ${ props => props.color };
`;

function Detail(){
  return (
    <div>
      <HTML 많은 곳/>
      <박스>
        <제목 color="blue">안녕하세요1</제목>
        <제목 color={'red'}>안녕하세요2</제목>
      </박스>
    </div>
  )
}
Codeforces 4A: 수박
Docker가 거울을 끌어올릴 수 없는 해결 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage