Styled Components

Vorhandenheit ·2021년 11월 9일

목록 보기

11/17

Styled Components?

이전까지 리액트에서 css를 적용시킬 경우, 따로 페이지를 만들어 거기에 모든 css 코드를 작성해 적용시켰다. 이 방식의 경우 단점은 간결하게 쓰기 시작해도 class가 많아질수록 너무 길어지고, 중복될 경우 같은게 적용될 수도 있고...쉽게 말해 일목요연하지가 않다.

이런 문제르 해결하기 위해서, css를 따로 페이지에 모아두는게 아니라 한 컴포넌트에 기능과 css를 같이 넣는 것입니다. Styled-components는 javascript 에서 css를 사용할 수 있게 도와주는 라이브러리 입니다. 이를 CSS in JS라고 부릅니다. 다른 Css-in-js로는 emotion, spring 등이 있습니다..

css 파일을 밖에 두지않고 컴포넌트 내부에 넣기 때문에, css가 전역으로 중첩되지 않도록 만들어줍니다.

1. 특징

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

No class name bugs
Styled Component는 스스로 유니크한 className을 생성한다. 이는 className의 중복이나 오타로 인한 버그를 줄여준다.
Easier deletion of CSS
Styled Component는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제된다.
Simple dynamic styling
className을 일일이 수동으로 관리할 필요 없이 React의 props나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다.
Painless maintenance
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다.
Automatic vendor prefixing
개별 컴포넌트마다 기존의 CSS를 이용하여 스타일 속성을 정의하면 될 뿐이다. 이외의 것들은 Styled Component가 알아서 처리해 준다.

Tagged Template Literals

Template Literals를 이용하여 함수의 인자를 파싱하여 넘겨주는 것, 이 문법을 사용하면 Function , Number, Array, Object등을 전달하고 실행할 수 있다.
```
function transform(staticData, ...dynamicData) {
 	console.log(staticData); // ["Hi, ", " and I am ", "."]
   console.log(dynamicData);// ["Mygumi", 20]
}
transform`Hi, ${userName} and I am ${age}.`;
```

transform를 일반적인 함수 호출 방식인 transform() 이 아닌 transform` ` 형태이다.
첫 번째 데이터에는 정적 데이터가 , 나머지 파라미터에는 동적데이터가 저장되어있다



 ## 2. 설치, 사용
 ```javascript
npm install --save styled-components

(1) 기본 문법

import styled from "styled-components"; // styled-components 패키지에서 styled 함수를 임포트

styled.button" 
 //<button> HTMOL 엘리먼트에 스타일 정의
"

리액트 컴포넌트 스타일링 할 때
임포트 후 인자로 해당 컴포넌트 넘김

import styled from "styled-components";
import Button from "./Button";

styled(Button)`
  // <Button> React 컴포넌트에 스타일 정의
`;

(2) props

스타일 속성 : ${props => props.스타일 ? 참 일때 속성: 거짓일 떄 속성

import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid lightgray;

  color: ${(props) => props.color || "grey"}; //props 칼라가 없으면 grey
  background: ${(props) => props.background || "white"};
`;

function Button({ children, color, background }) {
  return (
    <StyledButton color={color} background={background} Î>
      {children}
    </StyledButton>
  );
}

styled-components는 컴포넌트의 props를 전달받아 사용하는게 가능합니다.

조건(prop) && 참일 경우
조건(prop) ? 참일 경우 : 거짓일 경우
조건(prop) ||... prop가 전달되지않을 경우, 기본설정에 따르고 전달받으면 지정조건에 따름
조건에 따라 값을 바꿀 수 있습니다.

(3) extends : 상속 & 확장

const 컴포넌트이름 = styled(상속받을 컴포넌트)

const Button = styled.button`
`;
const LongButton = styled(Button)`
	//button을 상속받고, 속성을 추가할 수 있음
`;

(4) attrs 속성지정

스타일 컴포넌트를 선언하면서 바로 속성 선택할 수 있습니다.

const PwInput = styled.input.attrs(props => ({
	type : "password"
}))

const TextInput = styled.input.attrs(props => ({
	type : "text"
}))

(5) 금기 사항

render 안쪽에 Styled component를 선언해서는 안됩니다. 왜냐하면 리렌더링 될 때 마다 요소를 새로 제작하기 때문입니다

import React from 'react';
import styled from 'styled-components';

const AnyComponent = () => {
    // 절대 여기서 선언하면 안됩니다!
    const Button = styled.button`
        {button styles...};
    `;

    return (
        <Button>Bad!!!!</Button>
    );
}

return AnyComponent;