컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 있다.
다른 스타일이 적용되거나, css 파일이 너무 길어지거나, class를 다시 중복해서 만들거나.. 등등

그래서 리액트로 css를 만들려고 할 땐 styled components 라이브러리를 주로 사용한다.

설치법

1. 터미널을 열고

npm install styled-components

입력해주자.

그리고 사용하고 싶은 컴포넌트 위에

import styled from 'styled-components'

import하면 끝

기본적인 사용법

import styled from 'styled-components';

let Box = styled.div`
  padding : 20px;
  color : grey
`;
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn>버튼임</YellowBtn>
      </Box>
    </div>
  )
}

1. div를 만들어 styled.요소 라는걸 사용해서 backtick 기호로 css 스타일을 넣어주자
2. 다 만들고나서 변수에 따로 담아서 저장해두자.

장점

1. CSS 파일 오픈할 필요가 없고 js 파일에서 바로 스타일 넣는것이 가능하다.
2. 여기 적은 스타일은 여기서만 적용이 되고 다른곳에선 오염이 안된다.
3. 페이지 로딩시간이 단축된다.
   왜냐하면 저기 적은 스타일은 html 페이지의 style 태그에 넣어주기 때문이다.

단점

1. js 파일이 매우 복잡해진다.
   그리고 이 컴포넌트가 styled 인지 아니면 일반 컴포넌트인지 구분이 어렵다
2. js 파일 간 중복 디자인이 많을 경우 다른 파일에서 스타일을 넣은것들을 import 해오면 되는데 이는 css파일을 쓰는거랑 별반 차이가 없다.
3. 협업이 불편하다. 나처럼 styled-components 초보면 잘 못알아본다.

참고로 App.css 파일을 만들어서 App.js에서 import해서 쓴다고 하면 클래스명들은 임포트 해온 파일에서 까지 사용이 가능해진다.
그럴 땐 styled-components를 써도 되지만 그냥 CSS 파일에서도 다른 JS 파일에 간섭하지 않는 '모듈화' 기능을 제공해준다.
컴포넌트명.module.css 이렇게 css 파일을 만들면 해당 컴포넌트에 종속되기 때문에 그 컴포넌트에서만 사용이 가능해진다.

props 활용하기

지긋지긋한 props다.

import styled from 'styled-components';

let YellowBtn = styled.button`
  background : ${ props => props.bg };
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
        <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
        <YellowBtn bg="blue">파란색 버튼임</YellowBtn>
    </div>
  )
}

${props => prosp.bg} 이것이 styled-compontes에서 props를 뚫는 문법이다.

props를 활용해서 색깔들을 바꿔보자

/* eslint-disable*/
import { useParams } from "react-router-dom";
import styled from 'styled-components'
import Header from '../card/Component';
import { useState } from "react";


let YellowBtn = styled.button`
    background: ${ props => props.bg };
    color : ${ props => props.bg === 'yellow' ? 'red' : 'white' };
    padding: 10px;
`

let ChangeButton = styled.button`
    background : ${props => props.color};
    color : ${props => props.color === 'red' ? 'yellow' : 'black'};
    padding : 10px;
`



const DetailPage = function detailComponent(props){

    let [color, setColor] = useState("red");
    let onClickChange = () =>{
        color === 'red' ? setColor('blue') : setColor('red');
    }
    
    let {id} = useParams();
    let findItem = props.item.find( (item) =>{
        return item.id == id; 
    })
    
    
    return (
        <div className="container">
            
            <div className="row">
            <Header></Header>
            <YellowBtn bg="yellow">프롭스 버튼</YellowBtn>
            <ChangeButton color={color} onClick={onClickChange} >색깔 바뀌는 버튼</ChangeButton>
            
                <div className="col-md-6">
                    <img src={`https://codingapple1.github.io/shop/shoes${findItem.id + 1}.jpg`} width="100%" />
                </div>
                <div className="col-md-6">
                    <h4 className="pt-5">{findItem.title}</h4>
                    <p>{findItem.content}</p>
                    <p>{findItem.price}원</p>
                    <button className="btn btn-danger">주문하기</button> 
                </div>
            </div>
        </div>
    )
}

export default DetailPage;

설명은 생략한다.
(미래의 나야) 읽어서 해석해보자