TIL DAY 222

오늘 배운 일

React : Styled-Components 2탄

저번에 이어서, styled-components 의 기능들을 알아보자!

간단한 예제를 보자면...

먼저, 리액트 프로젝트를 만들어주고 src 에 Button.js 파일을 만들어준다.

Button.js

import styled from "styled-components";

const SIZES = {
  large: 24,
  medium: 20,
  small: 16
};

const Button = styled.button`
  background-color: #6750a4;
  border: none;
  border-radius: ${({ round }) => (round ? `9999px` : `3px`)};
  color: #ffffff;
  font-size: ${({ size }) => SIZES[size] ?? SIZES["medium"]}px;
  padding: 16px;

  &:hover,
  &:active {
    background-color: #463770;
  }
`;

export default Button;

styled-components 를 활용해서 크기를 조절하는 size, 둥근 모양을 정해주는 round 라는 Prop 을 추가해 버튼 컴포넌트의 크기와 모양을 만들어 본다.

아! 잊어 먹기 전에, styled-components 를 따로 설치해준다!

그리고 App.js 에 다음과 같이 코드를 작성해준다.

App.js

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

const Container = styled.div`
  ${Button} {
    margin: 10px;
  }
`;

function App() {
  return (
    <Container>
      <h1>기본 버튼</h1>
      <Button size="small">small</Button>
      <Button size="medium">medium</Button>
      <Button size="large">large</Button>
      <h1>둥근 버튼</h1>
      <Button size="small" round>
        round small
      </Button>
      <Button size="medium" round>
        round medium
      </Button>
      <Button size="large" round>
        round large
      </Button>
    </Container>
  );
}

export default App;

화면을 살펴보면...

Container 컴포넌트 안에 달러와 중괄호 ${ ... } 를 사용해서 자바스크립트 코드를 넣을 수 있다.
이러걸 표현식 삽입법 (Expression Interpolation) 이라고 부른다.

${ ... } 안에 변수 사용하기

예 )

평소에 사용하는 템플릿 문자열을 만드는 방식

const a = 2;
const b = 3;
const str = `${a} 더하기 ${b}는 ${a + b} 입니다.`;

styled-components 에서는...

const SIZES = {
  large: 24,
  medium: 20,
  small: 16
};

const Button = styled.button`
  ...
  font-size: ${SIZES['medium']}px;
`;

객체의 value 를 가져올려면, SIZES('프로퍼티 이름') 라는 코드를 쓰듯이, 사용이 가능하다.

${ ... } 안에 함수 사용하기

예를 먼저 보면...

const SIZES = {
  large: 24,
  medium: 20,
  small: 16
};

const Button = styled.button`
  ...
  font-size: ${(props) => SIZES[props.size]}px;
`;

코드를 살펴보면, 약간 리액트의 props 와 매우 비슷한 형태를 지니고 있다.

구조 분해(Destructuring) 를 활용하면...

font-size: ${({ size }) => SIZES[size]}px;

이렇게 쓸 수 있다.

그런데 여기서 size prop 이 값이 없거나 잘못된 값이면 어떻게 될까?

Styled Components에서는 undefined 값을 빈 문자열로 처리해 주기 때문에 위의 코드는 자칫 잘못된 CSS 코드가 된다. 그래서 가능하면 기본 값을 정해주는 좋은 여러 가지 방법이 있겠지만, 아래와 같은 식으로 널 병합 연산자(Nullish coalescing operator)를 사용할 수도 있다.

font-size: ${({ size }) => SIZES[size] ?? SIZES['medium']}px;

참고로!

널 병합 연산자 (??) 는 왼쪽 피연산자가 null 또는 undefined일 때, 오른쪽 피연산자를 반환하고 그러하지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다.

다른 방법으로는...

논리 연산자 사용하기

const Button = styled.button`
  ...
  ${({ round }) => round && `
      border-radius: 9999px;
    `}
`;

함수를 사용할 때 많이 쓰는 패턴 중 하나이다.

AND 연산자는 보통 피연산자가 false 일 때, 리턴을 한다.
(예외로는 둘 다 true 이면, 왼쪽인 걸 리턴한다.)

마지막 방법으로는...

삼항 연산자 사용하기

border-radius: ${({ round }) => round ? `9999px` : `3px`};

리액트를 조금이나마 써봤으면, 얼마나 삼항 연산자를 많이 사용하는지 알 수 있다.

위에 코드를 참고하면, round 가 참이면, 완전히 둥근 모서리를 보여주고 거짓이면 3px 정도의 모서리를 보여준다.