2/9 TIL

정민세·2023년 2월 9일

이 글을 쓰게 된 이유

부트캠프에서 메인 프로젝트를 진행할 때 CSS 툴을 styledComponent로 정하였다.
재사용되는 style들만 styled를 사용하는 줄 알고 styled를 작성할 때 재사용 되는 스타일드를 제외한 나머지 태그들은 부모 태그를 상속 받는 형태로 작성하였다.
ex)

const Wrapper = styled.div`
	width: 100vw;
	height: 100vh;
	align-text: center;

> div{
	display: flex;
	align-items: center;

  > span {
		font-size: large;
		color: red;
     }
}
`

<Wrapper>
  <div>
  <span><span>
  <div>
<Wrapper>

이런식으로 말이다. styled도 라이브러리기 때문에 많이 쓰게 되면 브라우저에 부담을 줄 수도
있을 거 같다는 혼자만의 생각으로 그랬던 것이다. 그러한 정보도 본 적도 없는데 말이다.
그래서 부트캠프에서 정해준 멘토분과 멘토링을 진행하던 중 이러한 문제점에 대해 말씀해주셨고,
정확히 styled가 가지고 있는 역할들을 분명하게 네이밍을 하여 정해줄 것을 부탁하셨다.
그리하여 더 자세히 styled의 정확한 사용법을 익히고자 이 글을 쓰게 되었다.

styledComponents란?

Styled Components는 컴포넌트 단위로 스타일링하기 때문에 개별 케이스로 분리해 CSS를 작성할 수 있다.
이렇게 분리하지 않고 스크립트 내 작성하는 방식을 CSS-in-JS 라고 한다.

styledComponents 사용법

node.js 기준

npm install styled-components

import styled from 'styled-components'; // 설치된 패키지를 import 하여 사용

const Wrapper = styled.태그`
 /* 변수명은 대문자로 시작, styled. 뒤에 작성할 태그와 `(백틱)을 작성하여 `(백틱) 안에서 작성하도록 한다.*/
`

styledComponents props 사용법

styled-components 장점 중 하나인 props를 내려 받아 컴포넌트마다 다른 스타일들을 직접 지정해줄 수 있다.

import styled from 'styled-components';

const Button = styled.button`
	width: 50px;
	height: 50px;
	color: ${(props) => props.color}
	font-size = ${(props) => props.fontSize}
`
function App() {
 	return(
      <div>
    	<Button color='red' fontSize='20px'>클릭</Button>
        <Button color='blue' fontSize='23px'>클릭</Button>
      </div>
    )

}

이런식으로 각 컴포넌트들을 커스텀마이징하여 사용이 가능하다.

조건문으로도 사용이 가능하다.

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

const Button = styled.button<{isLoading}>`
	width: 50px;
	height: 50px;
	color: ${(props) => isLoading ? props.color : green}
	font-size = ${(props) => isLoading ? props.fontSize : black}
`
function App() {
const [isLoading, setIsLoading] = useState(false)
 	return(
      <div>
    	<Button color='red' fontSize='20px' isLoading={isLoading}>클릭</Button>
        <Button color='blue' fontSize='23px' isLoading={isLoading}>클릭</Button>
      </div>
    )

}