Dutch pay 서비스에서 이용할 기술셋 5 (26일차)

<Styled-components>

1. Styled-components?

• 파일 단위의 CSS(public/index.css)가 아닌, 리액트처럼 컴포넌트화 된 스타일링 기법 소개
• Lyft, Coinbase, Atlassian, Doordash, Jane 등 다양한 테크 회사에서 사용 중인 라이브러리

2. Styled-components를 사용해야 하는 이유?

• 리액트 컴포넌트를 CSS로 쉽게 styling 하기 위한 방법을 제공한다.

const StyledButton = styled(Button)`
	background-color: blue;
	color: white:
	padding: 20px 10px;

	&:hover {
		background-color: darkblue;
}


const App = () => (
	<h1>Hello world! </h1>
		<StyleButton>여기를 클릭! <StyledButton>
)

3. 쉽게 styling 하기?

• 코드 스플릿(code split)
  • 하나의 CSS 파일을 전역으로 적용하는 것이 아닌 컴포넌트 단위의 스타일링 가능하다.
  • 필요한 코드만 로드해서 효율성을 제고한다.
• className 이 중복될 염려가 없다.
  • styled-components는 각 컴포넌트에 대해 고유한 class 이름을 생성하므로 이미 존재하는 클래스 이름과 겹칠 염려를 하지 않아도 된다.

<StyledButton />

// turns into
<div class="dg-e33vsa">...</div>

• React 컴포넌트 처럼 사용할 수 있다.
  • 재사용이 가능하다.
  • 컴포넌트 트리에서 볼 수 있다.
• 모든 스타일이 컴포넌트화 되어 있으므로, 컴포넌트의 사용처가 없는지 IDE (e.g. VS code, IntelliJ)를 통해 확인하고 쉽게 삭제 가능하다.
• 컴포넌트에 적용되는 CSS가 무엇인지 찾기 위해 여러 파일을 찾지 않아도 된다.

-> 참고: https://styled-components.com/docs/basics#motivation

4. 핵심 기능

4-1. props에 따른 스타일링 적용

• props를 지원한다.
• props에 따라 스타일링을 유동적으로 적용이 가능하다.

const StyledButton = styled.button`
	font-size: ${props => props.mobile ? '20px' : '24px'}
`

render(
	<StyledButton mobile={true} />
)

4-2. Style 상속 가능

• React 컴포넌트 혹은 Styled 컴포넌트를 상속 받아 스타일 오버라이딩 가능하다.
• 특정 상황에서 이미 존재하는 컴포넌트의 스타일링이 달라져야 할 때 사용 가능하다.

const StyledButton = styled.button`
	font-size: ${props => props.mobile ? '20px' : '24px'}
`

const StyledFloatingButton = styled(StyledButton)`
	display: float;
    bottom: 0px`
`
    
    
const StyledPrimaryButton = styled(StyledButton)`
	color: blue;
`

4-3. CSS nesting 가능

const StyledFloatingButton = styled(StyledButton)`
	background-color: blue;
    color: white;
    padding: 20px 10px;
    
    &:hover {
      background-color: darkblue;
    }
    
  `

4-4. 그대로 사용 가능한 컴포넌트의 속성(attributes)

• 상속하는 컴포넌트에서 제공하는 props/attributes는 Styled 컴포넌트 에서도 사용 가능
• e.g. Button 컴포넌트에서 제공하는 onClick 사용 가능

const StyledFloatingButton = styled(StyledButton)`
	backgound-color: blue;
`

render() {
  return (
  <StyledButton onClick={handleClicked}>저장</StyledButton>
  )
}

4-5. 컴포넌트의 속성(attributes) 설정도 가능

• .attrs 생성자를 이용해서 컴포넌트에 추가 속성(props)를 넘길 수 있음

const StyledButton = styled(Button).attrs(props => ({
  disabled: props.completed? false : trudisabled: props.completed? false : true
}))`
  background-color: blue;
`

render() {
	return (
		<StyledButton>저장<StyledButton>
	)
}

4-6. Animation 설정 가능

• @keyframes를 이용하면 CSS의 animations도 설정 가능

const rotate = keyframes`
   from `{
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
`

const StyledRotatingLoadingIndicator = styled(LoadingIndicator)`
   animation: ${rotate} is liner infinite;
   padding: 10px;
   ...
`

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

* 필수 삽입 링크 : http://bit.ly/3Y34pE0