[React] styled-components

✅ styled-component

• react에서 css 파일 없이 jsx(tsx)파일 내에서 css 효과 넣기

🔸 설치하기

// 기본적인 설치
터미널> npm install --save styled-components
터미널> yarn add styled-components

// TypeScript 환경에서 설치
// => styled-components의 type들을 가져와 줘야함 (안하면 오류남)
터미널> npm i --save-dev @types/styled-components

🔸 사용법

• 변수를 선언해 컴포넌트를 할당해서 사용하는 형식
• styled.태그이름`` => 백틱 안에 css 속성 입력

let Redbox = styled.div`
	background : red;
	padding : 20px;
`

• return문에서는 보통 컴포넌트처럼 사용

return ( < div> < Redbox/> < /div> )

🔸 장점

• css 파일을 열 필요가 없고, 덕분에 페이지 로딩시간이 단축
• 스타일이 다른 파일로 오염되지 않음!!
  => react는 마지막에 코드를 다 합치는 작업을 하는데, 이 과정에서 css파일도 합쳐지며 오염이 일어남
  => css 파일로도 오염 방지가 가능한데, 파일 작명시 규칙이 있음
  => "App.jsx"파일에 적용할 css파일이라면 "App.module.css"로 작명
  

🔸 단점

• jsx 파일이 복잡해짐
• 다른 파일에서 스타일 재사용하고싶다면 import해야하는데 그럼 결국 일반 css랑 동일함
  

🔹 props 넘겨주기

🟩 일반적인 사용법

• 탬플릿 리터럴로 css 속성을 입력해주니 ${}로 JavaScript 코드를 넣을 수 있음

let Colorbox = styled.div`
	background : ${props => props.color}
`
...
return ( < div> < Colorbox color="blue" /> < /div> )

🟦 TypeScript 환경에서

• 단일 props 넘겨주기

let Colorbox = styled.div< { color : string } >'
	background : ${props => props.color}
'
...
return ( < div> < Colorbox color="blue" /> < /div> )

• props 여러개 넘겨주기 => Type alias / Interface 사용하기!!

// Type alias
let MyType = { bg : string, txt : string }

// Interface
interface MyType { bg : string, txt : string }


let Colorbtn = styled.button< MyTyepe >'
	background : ${props => props.bg}
	color : ${props => props.txt}
'
...
return ( < div> < Colorbtn bg="blue" txt="white"/> < /div> )

🔸 추가 참고사항

• 간단한 프로그래밍 가능

color : ${ props => props.bg == blue? 'white' : 'black' };

• 상속가능

// Colorbtn이 마음에 들어 상속받아 커스텀하고 싶다면
let Newbtn = styled.button(Colorbtn)'css 커스텀'

• VSCode 환경에서 styled-components를 작성하면 내부 스타일이 문자열로 간주됨
  => 코드 신택스 하이라이팅(문법에 따라 색상을 입히는 작업)이 이루어지지 않음
  => 마켓플레이스에서 "vscode-styled-components" 검색해 설치

• props에 따른 조건부 스타일링 등에서 스타일 코드 여러 줄을 넣어 주어야 할 때는
  => styled-components에서 css를 불러와 넣어주어야 신택스 하이라이팅이 이루어짐
  => 그냥 문자열로만 써도 작동은 함!!

  import styled, {css} from 'styled-components'
  
  ...
  
  ${props => 
  	props.value &&
      css`
      	// 신택스 하이라이팅이 이루어지는 스타일 코드 여러줄
      `