- Styled Component는 CSS-in-JS 라이브러리이다.
- 컴포넌트를 기반으로 CSS를 작성할 수 있게 하여 재사용성과 효율성을 극대화한다.
npm install styled-components 로 설치한다.
import styled from "styled-components"; 로 불러와 사용한다.
Styled Component의 특징
-
Automatic critical CSS
Styled Component는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적하여 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입한다.
만약 코드를 적절히 분배해 놓으면, 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있다. -
No class name bugs
Styled Component는 자동으로 유일한 className 을 생성한다.
이를 통해서 className의 중복이나 오타로 인한 버그를 줄인다. -
Easier deletion of CSS
기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 없애기 위해 CSS 파일 내부의 className을 직접 찾아야 했다.
하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있다.
따라서 컴포넌트를 더 이상 필요하지 않아 삭제할 경우 자동적으로 이와 연결된 스타일 속성도 함께 삭제된다. -
Simple dynamic styling
className을 하나하나 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다. -
Painless maintenance
컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 된다.
따라서, 코드의 크기가 커지더라도 유지보수가 어렵지 않다. -
Automatic vendor prefixing
개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 된다.
그 이외의 것들은 Styled Component가 알아서 자동으로 처리해 준다.
props의 사용
- Styled Component를 통해 스타일 속성을 지닌 컴포넌트를 정의하고, 함수나 props를 전달할 수도 있다.
const Button = styled.button`
background: ${(props) => (props.primary ? "black" : "white")};
color: ${(props) => props.inputColor || "red"};
`;
// 글자색은 기본이 red이다. inputColor가 들어오면 해당 색이 된다.
return (
<>
<Button>Normal</Button>
<Button primary inputColor="blue">Primary</Button>
</>
);- 위의 코드를 보면, primary가 전달된 Button 컴포넌트는 배경색이 검은색이고 글자가 하얀색이다.
반면, primary가 전달되지 않은 Button 컴포넌트는 배경이 하얀색이고 글자가 검은색이다. - 이와 같이 props로 조건부 스타일링이 가능하다.
상속
const Water = styled(Button)`
color: white;
border-color: blue;
`;- 기존의 Button 컴포넌트를 상속한 Water 컴포넌트를 만들고, 새로 만든 Water 컴포넌트만을 위한 속성을 추가할 수 있다.
- Water 컴포넌트는 기존 속성을 가지고, 변경하거나 추가하고 싶은 속성을 추가하여 기존 속성을 확장하여 사용할 수 있다.
React 컴포넌트와 Styled 컴포넌트 사용
const ButtonStyled = styled.div`
background: ${(props) => (props.primary ? "black" : "white")};
color: ${(props) => props.inputColor || "red"};
`;
const Button = styled.button`
background-color: red;
text-align: center;
`;
const ColorButton () => {
~~ 생략 ~~
return(
<ButtonStyled>
<Button onClick={~~~}>클릭하세요</Button>
</ButtonStyled>
);
}
- 위와 같이 코드를 분리해서 리액트 컴포넌트와 스타일드 컴포넌트가 충돌하지 않게 작성할 수 있다.
- Styled Component는 render 메소드 바깥에서 정의한다.
- Styled Component가 리액트 컴포넌트 내부에 들어가게 되면, re-render 될때마다 스타일드 컴포넌트가 다시 정의되어 속도를 느리게 만든다.
중첩 스타일링을 하기 위해서 ampersand(&)를 사용할 수 있다.
ampersand(&)를 사용하지 않으면, 평범한 후손 셀렉터처럼 동작한다.
참고자료 : 코드스테이츠
