elice track ep.18 (13-3)

Styled Components
Styled Components에 대해 이해하기 위해서는 CSS in JS 개념에 대해 알아야 한다. 이는 말 그대로 CSS를 JS 파일 안에 작성하는 것이다. 대두되면서 탄생한 라이브러리이다. HTML+JS+CSS를 묶어서 하나의 JS파일에 넣은 뒤 컴포넌트 단위로 개발할 수 있게 만들어준다.

styled-components는 이러한 라이브러리 중 가장 인기있다.
설치하기

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

# 버전이 안 맞아서 에러가 날 경우 가장 최신 버전으로 설치
$ npm install styled-components@latest

# with yarn
$ yarn add styled-components

Styled Components는 pakage.json에 다음 코드를 추가하도록 권장한다.

여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여준다.

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

그리고 Styled Components를 사용할 파일에 아래와 같이 import하면 준비는 끝난다.

import styled from "styled-components"

1. 컴포넌트 만들기

import styled from "styled-components";

//Styled Components로 컴포넌트를 만든다.
const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용하면 된다.
  return <BlueButton>Blue Button</BlueButton>;
}

Styled Component 또한 컴포넌트이기 때문에 첫글자를 무조건 대문자로 시작해야 한다

템블릿 리터럴(백틱)안에 작성을 하느라 문자열처럼 표시 돼 자동완성도 안 되고 구분이 힘들 수 있는데, vscode-styled-components 익스텐션을 설치하면 편리해진다

2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기

//만들어진 컴포넌트를 재활용한다.
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

//재활용한 컴포넌트를 재활용할 수도 있다.
const BigRedButton = styled(BigBlueButton)`
  background-color: red;
`;

export default function App() {
  return (
    <>
      <BlueButton>Blue Button</BlueButton>
      <br />
      <BigBlueButton>Big Blue Button</BigBlueButton>
      <br />
      <BigRedButton>Big Red Button</BigRedButton>
    </>
  );
}
 

이렇게 사용하면 코드 중복을 줄여준다.
3. Props 사용하기
Styled Component로 만든 컴포넌트 또한 React Component처럼 props를 내려줄 수 있다.

내려준 props 값에 따라서 컴포넌트를 조건부 렌더링하는 식으로 사용한다.
이렇게 props를 줄 수도, 안 줄 수도 있다.

const Button1 = styled.button`
  background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;

export default function App() {
  return (
    <>
      <Button1>Button1</Button1>
      <Button1 skyblue>Button1</Button1>
    </>
  );
}
 

혹은 이렇게 활용하는 방법도 있다.

const Button = styled.button`
	background: ${(props)=> props.color ? props.color : "white"}
    /* background: ${(props) => props.color || "white"}; */
`;

<Button color="orange">Button1</Button>
<Button color="tomato">Button2</Button>

4. 전역 스타일 설정하기
   UI를 구현하기 전, margin:0, padding:0 같은 전역 스타일을 세팅하곤 한다. styled-components에서도 이러한 전역 스타일을 지원한다.

우선 전역 스타일 설정을 위한 createGlobalStyle 함수를 불러온다.

import { createGlobalStyle } from "styled-components";

그리고 css파일에서 작성하는 것처럼 설정하고 시싶은 스타일을 작성한다.

const GlobalStyle = createGlobalStyle`
    button {
        padding : 0;
        margin : 0;
    }
`

이렇게 만든 컴포넌트를 최상위에 사용해주면 전역에 Global 컴포넌트의 스타일이 적용된다.

function App() {
	return (
        <>
            <GlobalStyle />
            <Button>전역 스타일 적용하기</Button>
        </>
    );
}

5. 조건부 CSS 보여주기
   조건에 따라 CSS를 다르게 보여주고 싶다면 styled-components 라이브러리에서 css 를 사용하면 된다.

import { css, styled } from 'styled-components';

const Button = styled.button`
    width: 50px;
    background-color: white;
    ${(props) =>
    	props.isClicked ?
        css`
        	background-color: purple;
        `;
    }
`;

위 코드는 인자로 받은 props에 따른 background-color 조건부 렌더링을 구현한 모습이다.

6. 자주 사용하는 css 따로 관리하기
   아까와 같이 css 를 사용하면 된다. 아래와 같이 자주 사용하는 CSS를 변수로 관리하면 코드 중복을 줄이는 데 용이하다.

cosnt FlexCenter = css`
    display: flex;
    justify-content: center;
    align-items: center
`;

const Flexbox = div`
	${FlexCenter}
`;

// 이렇게 인자를 주고 작성하면 가독성이 더 좋다
const RingVariant = (radius, stroke = "10") => css`
    height: ${radius * 2}px;
    width: ${radius * 2}px;
    border: ${stroke}px solid black;
`;
 

7. CSS 셀렉터 사용하기
   styled-component 에서 셀렉터 사용은 다음과 같다. & 는 현재 요소를 뜻한다.

// 컴포넌트 위에 마우스가 올라갈때
  &:hover {
    color: red;
  }

  // 바로 옆은 아니지만 형제요소일 때
  & ~ & {
    background: tomato;
  }

  // 현재 요소 바로 옆에 현재 요소가 붙어있을 때
  & + & {
    background: lime;
  }
  
  // 현재 요소가 something이라는 클래스를 갖고있을 때
  &.something {
    background: orange;
  }
  
  // something-else라는 클래스를 가진 부모안에 있을 때
  .something-else & {
    border: 1px solid;
  }