React #18

Styled Components

가장 인기 있는 CSS-in-JS 관련 React 라이브러리

특징 - styled-components.com

• Automatic critical CSS
  해당하는 컴포넌트를 추적해서 스타일을 자동으로 삽입
  코드를 잘 나눠둔다면 사용자가 화면을 볼 때 필요한 코드가 훨씬 줄어든다

• No class name bugs
  알아서 유니크한 className 을 생성하여 관련 문제(이름 중복, 오타 등)를 줄인다

• Easier deletion of CSS
  스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 컴포넌트를 삭제할 때 스타일도 같이 삭제된다

• Simple dynamic styling
  React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적

• Painless maintenance
  다른 CSS 파일들을 검색하지 않아도 되기 때문에 유지보수가 쉽다

• Automatic vendor prefixing
  개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하고 나머지는 알아서 처리해준다

설치

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

# with yarn 
$ yarn add styled-components

package.json에 다음 코드를 추가하면 좋다
= 여러 버전의 Styled Component가 설치되어 발생하는 문제를 줄인다

{
  "resolutions": {
    "styled-components": "^5"
  }
}

기본적인 형태

Styled Components는 tagged template literals 를 이용

import styled from "styled-components";

// <h1> 태그를 렌더링 할 title component
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// <section> 태그를 렌더링 할 Wrapper component
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

export default function App() {
  // Title과 Wrapper를 사용
  return (
    <Wrapper>
      <Title>Hello World!</Title>
    </Wrapper>
  );
}

props 적용

primary 라는 props 의 여부에 따라 색이 달라진다

// Button component
...
  background: ${(props) => (props.primary ? "palevioletred" : "white")};
  color: ${(props) => (props.primary ? "white" : "palevioletred")};
...

// App component
...
  <Button>Normal</Button>
  <Button primary>Primary</Button>
...

스타일 상속

상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled() 로 감싼 뒤, 변경하고 싶은 속성만 새로 정의

// Button 컴포넌트에 Tomato 컴포넌트만의 속성 변경, 추가
const Tomato = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

Passed props

props 로 스타일 속성이 전달된다면
= props 로 전달된 속성을 우선 적용
전달되는 속성이 없다면
= 기본으로 설정된 속성을 적용

import styled from "styled-components";

const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${(props) => props.inputColor || "red"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

export default function App() {
  return (
    <div>
      {/* 전달 속성이 없는 경우 */}
      <Input defaultValue="김코딩" type="text" />
      {/* props inputColor="blue" */}
      <Input defaultValue="박해커" type="text" inputColor="blue" />
    </div>
  );
}

---

Reference
codestates - [React] 컴포넌트 디자인