[CS] Styled-Component Day-32

cptkuk91·2021년 11월 29일
0

CS

목록 보기
60/139
post-custom-banner

React 라이브러리 중 가장 인기 있는 게 Styled-Component 입니다.
React의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 탄생하였습니다.

Styled-Component의 특징

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

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

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

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

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

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

Styled-Component 설치

# with npm
$ npm install --save styled-components

# with yarn 
$ yarn add styled-components

Checkpoint 요약

Storybook?

Storybook은 컴포넌트의 재사용성을 확대하기 위해 사용하는 UI 개발도구입니다.

CSS-in-JS의 장점

  • 다른 컴포넌트에 영향을 주지 않기 때문에 생성, 수정, 삭제가 자유롭습니다. (CSS-in-JS를 활용해 의존성을 낮출 수 있습니다.)
  • CSS가 특정 컴포넌트에 종속되기 때문에 className이 겹치는 등의 부작용이 없습니다. (협업 뿐 아니라 유지보수에도 용이합니다.)
  • CSS-in-JS는 필요한 부분만 style 태그를 생성해 로딩합니다.
  • CSS-in-JS 라이브러리는 styled-components, glamorous, aphrodite등이 있고, styled-components가 인기 있습니다.

Styled-Component

  • 스타일 속성 정의 시 CSS3 문법을 그대로 사용할 수 있습니다.
  • 스타일 속성을 지닌 컴포넌트를 정의할 때 함수를 전달하고, 함수 안에서 props를 사용할 수 있습니다.
  • 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled()로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장하여 사용할 수 있습니다.
  • 별도의 className을 지정해 주지 않아도 Styled-Components가 각 태그마다 유니크한 이름을 생성해줍니다.

(기타)
Styled-Components 사용 시 . 또는 ()중 하나만 사용해야 합니다.
ex) 잘못된 사용법

const Username = styled.(div)`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`;

useRef에 대한 설명

  • useRef는 DOM 엘리먼트의 특정 메소드를 활용해야 할 때 자주 사용됩니다.
  • ref 속성을 활용해서 DOM 엘리먼트, React 엘리먼트의 주소값을 useRef의 리턴값에 전달할 수 있습니다.

profile
메일은 매일 확인하고 있습니다. 궁금하신 부분이나 틀린 부분에 대한 지적사항이 있으시다면 언제든 편하게 연락 부탁드려요 :)
post-custom-banner

0개의 댓글