TIL 25_styled-components 🎀

dudgus5766·2021년 9월 13일

CSS JavaScript Sass TIL scss styled components 스타일컴포넌트

React

목록 보기

7/8

현존하는 CSS in js 관련 리액트 라이브러리중 가장 인기 있는 라이브러리이면서 CSS파일을 만들지 않아도 컴포넌트내에서 바로 CSS처리를 해줄 수 있기 때문에 효율적이어서 점점 인기가 많아지는 styled-components에 대해 알아보자!

styled components

styled components는 javascript에서 css를 사용 할 수 있도록 도와주는 스타일링 프레임워크이다. React Component에 특정 스타일링을 할 수 있기 때문에 재사용성을 더 높일 수 있고, javascript에 영향을 받는 스타일링을 간편하게 구현 할 수 있다.

사용 예시

기존 방식 (CSS)

const divStyle = {
    backgroundColor: "black",
    width: "100px",
    height: "100px",
  };

  return <div style={divStyle}></div>

styled-components 방식

const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
  `;

  return <StyledDiv></StyledDiv>

장점 👍

1. component 단위 스타일링

styled-components로 생성된 Components들을 빌드하면 임의의 클래스 네임에 스타일이 적용되어 있는 것을 확인 할 수 있다. styled-components는 중복되지 않는 특정 클래스 네임을 생성해 스타일을 적용하기 때문에, 클래스 네임이 중복되거나 selector의 우선 적용 순위 때문에 css 스타일링이 혼선을 일으키는 사고를 방지 할 수 있다.

2. 조건부 스타일링

const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
    ${({ login }) => {
      return login ? `display: none` : null;
    }}
  `;

  return <StyledDiv login={true}></StyledDiv>;

styled-components는 Component의 props를 전달받아 사용하는 것이 가능하다.
템플릿 리터럴 내에서 javascript를 사용하는 것과 같은 형식이며, 내부에서 선언된 함수는 props를 파라미터로 실행된다.

3. 확장 스타일링

const Container = styled.div`
    max-width: 600px;
    width: 100%;
    height: 100px;
  `;

  const BlackContainer = styled(Container)`
    background-color: black;
  `;

  const RedContainer = styled(Container)`
    background-color: red;
  `;

  return (
    <>
      <BlackContainer />
      <RedContainer />
    </>
  );

styled-components는 새로운 Component를 선언하는 것 뿐만 아니라, 기존의 Component에 스타일을 추가하는 것도 가능하다. 확장 스타일링을 사용하면 중복된 코드 양을 줄이고, 분산된 스타일을 일관적으로 관리 할 수 있어 유지보수 비용을 줄일 수 있다.

4. 중첩 스코프

const StyledDiv = styled.div`
    background-color: black;
    width: 100px;
    height: 100px;
    p {
      color: white;
    }
  `;

  return (
    <>
      <StyledDiv>
        <p>Title</p>
      </StyledDiv>
      <p>content</p>
    </>
  );