10. Styled-components : 버튼 사이즈 조정하기 - 컴포넌트 스타일링 | 벨로퍼트

 

size props 를 설정하여 버튼의 크기도 다양하게 만들어보겠습니다.

/src/components/Button.js :

// ...

const sizeStyles = css`
  ${props =>
    props.size === 'large' &&
    css`
      height: 3rem;
      font-size: 1.25rem;
    `}

  ${props =>
    props.size === 'medium' &&
    css`
      height: 2.25rem;
      font-size: 1rem;
    `}

    ${props =>
      props.size === 'small' &&
      css`
        height: 1.75rem;
        font-size: 0.875rem;
      `}
`;

const StyledButton = styled.button`
  // ...
  
  /* 크기 */
  ${sizeStyles}

  // ...
`;

function Button({ children, color, size,  ...rest }) {
  return (
    <StyledButton color={color} size={size} {...rest}>
      {children}
    </StyledButton>
  );
}

Button.defaultProps = {
  color: 'blue',
  size: 'medium'
};

export default Button;

참고로 sizeStyles 에 해당하는 코드를 따로 분리하지 않고 StyledButton 의 스타일 내부에 바로 적어도 상관은 없습니다. 다만, 이렇게 분리해두면 나중에 유지보수를 할 때 더 편해질 수 있습니다.

 

이제 사이즈가 커스터마이징된 버튼들을 렌더링해봅시다.

// ...

const ButtonGroup = styled.div`
  & + & {
    margin-top: 1rem;
  }
`;

function App() {
  return (
    <ThemeProvider
      theme={{
        palette: {
          blue: '#228be6',
          gray: '#495057',
          pink: '#f06595'
        }
      }}
    >
      <AppBlock>
        <ButtonGroup>
          <Button size="large">BUTTON</Button>
          <Button>BUTTON</Button>
          <Button size="small">BUTTON</Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color="gray" size="large">
            BUTTON
          </Button>
          <Button color="gray">BUTTON</Button>
          <Button color="gray" size="small">
            BUTTON
          </Button>
        </ButtonGroup>
        <ButtonGroup>
          <Button color="pink" size="large">
            BUTTON
          </Button>
          <Button color="pink">BUTTON</Button>
          <Button color="pink" size="small">
            BUTTON
          </Button>
        </ButtonGroup>
      </AppBlock>
    </ThemeProvider>
  );
}

이 과정에서 ButtonGroup 이라는 컴포넌트를 만들어서 서로간의 여백을 1rem 으로 설정을 해주었습니다.

 

여러 색들을 지닌 버튼들이 나타났나요?

우리가 아까전에 작성했던 sizeStyles 를 보면, 중복되는 코드들이 은근히 있습니다. 해당 코드를 리팩토링한다면 다음과 같이 할 수 있습니다.

/src/components/Button.js :

// ...

const sizes = {
  large: {
    height: '3rem',
    fontSize: '1.25rem'
  },
  medium: {
    height: '2.25rem',
    fontSize: '1rem'
  },
  small: {
    height: '1.75rem',
    fontSize: '0.875rem'
  }
};

const sizeStyles = css`
  ${({ size }) => css`
    height: ${sizes[size].height};
    font-size: ${sizes[size].fontSize};
  `}
`;

const StyledButton = styled.button`
  // ...

  /* 크기 */
  ${sizeStyles}

  // ...
`;

컴포넌트들이 여전히 잘 나오고 있나요?