TIL 2021.01.11

React 컴포넌트 스타일링 방식 #1

Styled-components

• CSS in JS 라이브러리

  • 스타일 정의를 CSS 파일이 아닌 JS로 작성된 컴포넌트에 바로 삽입

• 스타일이 명시된 컴포넌트를 지정하는 방식

• props를 전달하여 동적 스타일링가능

• Sass 문법 지원 (ex. & 자기자신 선택)

• Why Styled-Components?

  • CSS파일 분리시 어플리케이션의 규모가 커질 수록 파일의 부피가 커지고 복잡해짐

  • CSS 파일을 왔다 갔다할 필요 없음

  • 리액트 인라인 스타일링과 스타일드 컴포넌트

    리액트 인라인 스타일링과 달리 이 패키지를 이용해 작성하는 CSS는 실제 CSS와 동일한 것이다. 따라서 pseudo 셀렉터 뿐만아니라 CSS에서 사용할 수 있는 모든 문법이나 미디어 쿼리등을 사용할 수 있다.

• CSS Modules 와의 성능 비교

  • 인터랙션 속도가 비교적 늦다.

    인터랙션이 풍부하거나 페이지 하나가 포함하는 컴포넌트 수가 많은 경우에는 Styled Components와 같은 CSS-in-JS 방식이 아닌, CSS Modules와 같은 CSS-in-CSS 방식으로 작업하기를 권장한다.

설치

 npm install -S styled-components

• vscode-style-components extension도 깔아주면 좋다. (backtick안의 css highlight 기능)

코드 예시

// src/component/container/styles.tsx
import styled from "styled-components/macro";

// props 분리 - 동적 스타일링 : index.tsx에서 지정 
interface ContainerProps { 
  display?: boolean;
}

export const Container = styled.div<ContainerProps>`
  width: 100px;
  height: 200px;
  display: ${(props: ContainerProps) => (props.display ? "block" : "none")};
`;

export const ContainerImage = styled.img`
  width: 100%;
  height: 40%;
  object-fit: cover; 
`;

// src/component/container/index.tsx
import React from "react";
import * as S from "./styles";

interface ContainerProps {
  children?: React.ReactNode;
}

// styled-components 사용
// 명시해준 CSS가 종속됨
const Container: React.FC<ContainerProps> = (props) => {
  return (
    <S.Container display={true}>
      <S.ContainerImage src="<url>"></S.ContainerImage>
      {props.children}
    </S.Container>
  );
};

export default Container;

//src/App.tsx
import React from "react";
import Container from "./component/container/index";

function App() {
  return (
    <div>
      <Container>This is Container.</Container>
    </div>
  );

export default App;

• createGlobalStyle : global style for body

• 참고

  https://react.vlpt.us/styling/03-styled-components.html
  

클론 코딩을 할땐 먼저 박스 컴포넌트들의 구성과 정렬을 생각하는 것이 좋은 듯하다. 클론 코딩을 하면서 컴포넌트 레이아웃짜기, CSS 연습을 계속 해봐야겠음!