import styled from 'styled-component';

const Title = styled.div`
	font-size: 20px;
`;

export default () => <Title>제목</Title>;

import styled from 'styled-component';

const Title = styled.div`
	font-size: 20px;
	color: ${props => props.primaty ? 'blue' : 'white'};
`;

export default () => <Title primary>제목</Title>;

import styled from 'styled-component';
import Title from './Title';

const ToamtoTitle = styled(Title)`
	background-color: tomato;
`;

export default () => <ToamtoTitle primary>제목</ToamtoTitle>;

// GlobalStyle.js
const GlobalStyle = createGlobalStyle`
	body {
		background-color: black;
	}
`;

// App.js 안에
<>
  <GlobalStyle />
  <Header />
</>

// api.js

import axios from 'axios';

const api = axios.create({
	baseURL: 'https://www.api.com',
});

const users = () => api.get('/user');
const user = (name) => api.get(`/user/${name}`);

export {users, user};

import React from 'react';
import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

MyComponent.propTypes = {
  // prop이 특정 JS 형식임을 선언할 수 있습니다.
  // 이것들은 기본적으로 모두 선택 사항입니다.
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 랜더링 될 수 있는 것들은 다음과 같습니다.
  // 숫자(numbers), 문자(strings), 엘리먼트(elements), 또는 이러한 타입들(types)을 포함하고 있는 배열(array) (혹은 배열의 fragment)
  optionalNode: PropTypes.node,

  // React 엘리먼트.
  optionalElement: PropTypes.element,

  // prop가 클래스의 인스턴스임을 선언할 수 있습니다.
  // 이 경우 JavaScript의 instanceof 연산자를 사용합니다.
  optionalMessage: PropTypes.instanceOf(Message),

  // 열거형(enum)으로 처리하여 prop가 특정 값들로 제한되도록 할 수 있습니다.
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 여러 종류중 하나의 종류가 될 수 있는 객체
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 특정 타입의 행렬
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 특정 형태를 갖는 객체
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // 위에 있는 것 모두 `isRequired`와 연결하여 prop가 제공되지 않았을 때
  // 경고가 보이도록 할 수 있습니다.
  requiredFunc: PropTypes.func.isRequired,
}

// 기본 children의 propTypes
MyComponent.propTypes = {
	children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ])
}

// 하나의 children만 정의
MyComponent.propTypes = {
	children: PropTypes.element.isRequired
}

// HomeContainer.js

import React from "react";
import CoinsPresenter from "./CoinsPresenter";

export default class HomeContainer extends React.Component {
  state = {
    // your state
  };

  async componentDidMount() {
    // your logic
  }

  render() {
		const {data} = this.state;
    return <CoinsPresenter data={data} />;
  }
}

// HomePresenter.js

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";

const Container = styled.div`
	/* your styles */
`;

const HomePresenter = ({ data }) => <Container>{data}</Container>

ExchangesPresenter.propTypes = {
  data: PropTypes.string.isRequired,
};

export default HomePresenter;