styled-components

컴포넌트가 많아지면 css를 짜기 난감한 경우가 있다.
(클래스명을 중복으로 한다던가,,, )

그렇기때문에 컴포넌트와 css의 혼연일체가 필요하다. (css in js)
이때 사용하는 것이 styled-componts라는 라이브러리이다.

---

시작

1. 터미널에 다음과 같이 입력해 설치한다.

   yarn add styled-components

2. 임포트

   import styled from 'styled-components';

---

사용하기

이 라이브러리는 스타일을 컴포넌트에 미리 주입해서 사용할 수 있다.

다음을 보자.
div를 padding : 20px인 박스 컴포넌트를 만들었다.

import React, { useState } from 'react';
//임포트
import styled from 'styled-components';

// 박스 컴포넌트 생성
let 박스 = styled.div`
  padding : 20px;
`;
// 제목 컴포넌트 생성
let 제목 = styled.h4`
  font-size : 25px;
`;

function Detail(){
  return (
    <div>
      ...
      <박스>
    	<제목>
    		제목입니다
    		</제목>
    	</박스>
    </div>
  )
}

1. div박스를 만들기 위해 syled.div를 사용했다.
   제목 컴포넌트를 만들고 싶다면 syled.h4처럼 사용하면 된다.

2. ` ` (백틱) 기호안에는 넣고싶은 css 스타일을 작성한다. 

3. 변수로 저장하면 컴포넌트로 사용할 수 있게 된다.

---

props 사용하기

만약 비슷한 모양의 UI가 필요한 경우가 있다.
예를들면 위 예제에서의 font-size는 25px로 동일하지만 색상이 추가된 경우다.

// 제목 컴포넌트 생성
let 제목 = styled.h4`
  font-size : 25px;
`;
// 제목2 컴포넌트 생성
let 제목2 = styled.h4`
  font-size : 25px;
  color : red;
`;

비슷한 컴포넌트를 계속 만드는 것보다 모듈화를 시키기 위해 props를 사용 할 수 있다.

import React, { useState } from 'react';
import styled from 'styled-components';

let 박스 = styled.div`
  padding : 20px;
`;
let 제목 = styled.h4`
  font-size : 25px;
  color : ${ props => props.색상 };
`;

function Detail(){
  return (
    <div>
      ...
      <박스>
        <제목>제목입니다</제목>
      </박스>
    </div>
  )
}

1. 기존에 font-size만 있던 제목 변수에 color라는 스타일을 집어 넣는다.

2. 색상기입란에 ${ props => props.색상 } 이라는 코드를 적는다.${}문법은 문자를 생성하는 (백틱)기호에서 사용할 수 있는 ES6문법이다.
   {}안에 변수나, 함수를 집어넣어서 사용하는 것으로, 위 코드에서는 props.색상이라는 props 변수를 콜백 함수로 집어 넣은 것이다.

이와 같이 모듈화를 하면 다음과 같이 props에 원하는 문자를 전송해 줄 수있다.

function Detail(){
  return (
    <div>
      ...
      <박스>
        <제목 색상="blue">안녕하세요1</제목>
        <제목 색상={'red'}>안녕하세요2</제목>
      </박스>
    </div>
  )
}

위 예제에선 색상이라는 props에 각각 blue라는 문자, red라는 문자가 들어가서 컴포넌트가 생성되어

미리보기 화면에선
안녕하세요1
안녕하세요2
각각 컴포넌트가 이렇게 다른 색으로 나타난다.

참고
리액트에서는 props를 전송할 때 두가지 방법을 사용할 수 있다.

<제목 색상="blue"></제목>
<제목 색상={'red'}></제목> 

일반 텍스트를 전달하고 싶으면 "" 따옴표 안에 써서 전송할 수 있고, 변수나 자료형을 담고 싶으면 {} 중괄호 안에 써서 전송 할 수 있다.