리액트 Styled Components - 1편

• Styled Components 란?

• 설치
  $ npm install --save styled-components

• 사용법 (methods)

import React, { Component, Fragment } from 'react';
import styled from 'styled-components';
    
class App extends Component {
  render() {
    return (
      <Fragment>
		<Button>Hello</Button>
		<Button danger>Hello</Button>
      </Fragment>
    )
  }
}

const Button = styled.button`
	border-radius: 50px;
    padding: 5px;
    min-width: 120px;
    color: white;
    font-weight: 600;
    -webkit-appearance: none;
    cursor: pointer;
    &:active,
    &:focus {
      outline: none;
    }
    background-color: ${props => (props.danger ? 'red' : 'purple')}
`;

export default App;
	

styled 객체 안에 'styled-components'를 import 해주고, Button 변수에 styled.button 방식으로 html button 태그를 css와 함께 담아준다.
마지막에 background-color를 보면 props에 체크해서 red 혹은 purple로 지정할 수도 있다.

예를 들어 body태그의 margin, padding을 없애고 싶을때는 styled-components의 createGlobalStyle메소드를 사용하면 된다.

---생략---

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

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

---생략---

<React.Fragment>
  <GlobalStyle>	//	<-- 추가
  <Button>Hello</Button>
  <Button danger>Hello</Button>
</React.Fragment>

createGlobalStyle메소드를 import 하고, GlobalStyle 변수 안에 body의 style을 정의해주고 랜더링 부분에 추가해주면 된다.

---

withComponent 메소드는 새로운 stylecomponent를 생성하고 다른 태그에 적용 시킨다.

예를들어 button 태그의 stylecomponent를 a 태그에 적용시키고 싶다면 아래와 같이 한다.

const Anchor = Button.withComponent('a');

css를 추가하고 싶다면 styled 메소드를 이용.

const Anchor = styled(Button.withComponent('a'))`
	text-decoration: none;
`;

---

keyframes => animation을 위한 keyframes을 생성하는 메소드.
v4에서는 keyframes 을 쓰기 위해 css 헬퍼를 함께 써야한다.

keyframes 참고 시작 ==>
1. @keyframes란?

• @keyframes 는 css 문법중 하나로 애니메이션이 만들어지는 부분.
• @keyframes 를 타임라인 안의 하나의 스테이지(구간).
• @keyframes 안에서 우리는 스테이지들을 정의하고 각 구간마다 다른 스타일을 적용 시킬 수 있다.

2. @keyframes 사용법?

   • 애니메이션 스테이지들을 정의. @keyframes 속성들은~
     - 우리가 정한 이름 ex) tutsFade

     • 스테이지: 0~100%; from(0%) 그리고 to(100%)

     • CSS 스타일: 각 구간에 적용시킬 스타일

       				@keyframes tutsFade {
             from {
               opacity: 1;
             }
             to {
               opacity: 0;
             }
           }
       
       			```
       ```css
       				.element {
       					animation: tutsFade 4s 1s infinite linear alternate;
       				}
       
       			```
       

keyframes 참고 끝==>

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

---생략---
  
const Button = styled.button`
	${props => {
		if (props.danger) {
            return css `animation: ${rotation} 2s linear infinite `;
		}
	}}
`;

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

---

props 로 style 을 변경할 수 있다.

<Button danger rotationTime={5}></Button>

const Button = styled.button`

	---생략---

	${props => {
		if (props.danger) {
			return css `animation: ${rotation} ${props.rotationTime}s linear infinite `;
        }
    }}
`;

Button 컴포넌트에 rotationTime 를 props 로 css 를 변경했다.

---