[CSS] React에서 스타일 적용하기 (Basic CSS, Module CSS, Styled Components)

 

🔖  Basic CSS

# 인라인 스타일

<button style={{color:'white, background:'blue'}}>버튼</button>

// 동적스타일링
<button style={{background : isBtnOn ? 'blue' : 'grey'}}>버튼</button>

 

# 외부 스타일 (기본 CSS)

// common.css
.btn {
  color: white;
  background-color: blue;
  padding: 0.5rem;
  border: none;
  border-radius: 0.5rem;
}

// Home.js
<button className="btn">버튼</button>

or

const isBtnOn = true;
<button className={`btn ${isBtnOn ? 'on' : ''}`}>버튼</button>

* 단점: css가 공유된다. 즉, 다른 컴포넌트라도 같은 클래스명이라면 같은 스타일이 적용된다.

 

 

🔖  Module CSS

css 파일이 import 된 컴포넌트에서만 스타일에 영향을 받는다

 

# 사용방법

1.  CSS 파일명 사이에 .module 추가

Button.module.css

2. 적용할 컴포넌트 파일 내부에 import

import styled from "./Button.module.css"

3. 클래스명 추가

<button className={styled.btn}>Button</button>

 

Button.module.css

.btn {
  color: white;
  background-color: #d4e2d4;
  padding: 0.5rem;
  border: none;
  border-radius: 0.5rem;
}

Button.js

import styled from "./Button.module.css";

function Button() {
  return <button className={styled.btn}>버튼</button>;
}

export default Button;

 

# 동적 스타일링

클래스네임에 백틱 추가

const isBtnOn = true;

<button className={`${styled.btn}${isBtnOn}`}></button>

 

 

🔖  Styled Components

styled-compoents로 감싸진 부분만 스타일에 영향을 받는다

 

# 사용방법

1. styled-components 설치

npm install styled-components

2. styled-component 적용할 컴포넌트 파일 내부에 import

 

 

Button.js

import styled from 'styled-components'

const StyledButton = styled.button`
	color: white;
  	background-color: ${props => props.background || 'blue'}; // blue: default 값
  	padding: 0.5rem;
  	border: none;
  	border-radius: 0.5rem;
`

function Button({children, background}) {
	return <StyledButton background={background}>{children}</StyledButton>
}


export default Button;

 

Home.js

import Button from '../components/Button'

function Home() {
	return (
    	// Button 컴포넌트 태그 사이에 원하는 적용하고 싶은 버튼명 입력
    	<Button background="green">버튼</Button>
    );
}

export default Button;

 

 

 # 여러개의 스타일 적용시

추가해야 할 스타일이 많아지면 스프레드 연산자를 활용해 props에 담아주자

import styled from 'styled-components'

const StyledButton = styled.button`
    color: ${props => props.color || 'white'};
  	background-color: ${props => props.background || 'blue'};
  	padding: ${props => props.padding : '0.5rem'};
  	border: none;
  	border-radius: 0.5rem;
`

function Button({children, ...props}) {
	return <StyledButton {...props}>{children}</StyledButton>
}


export default Button;

 

# 동적 스타일링

props 활용

// Button.js
import styled from 'styled-components'

const StyledButton = styled.button`
	//..
    background: ${(props) => props.isBtnOn ? 'blue' : 'grey'}
`

// Home.js
<Button isBtnOn={true}>버튼</Button>

 

 

 

---

아직은 공부하는 단계이기 때문에 성능은 어느것이 더 좋은지만 알아두면 된다고 생각한다.

 

🏷 선호도, 성능 관련 참고자료

https://reactjsexample.com/performance-comparison-of-css-in-js-libraries/

Performance Comparison of css-in-js Libraries

(위 자료에 따르면 styled-component가 더 성능이 좋다고 한다)

 

사람마다 편하게 느끼는게 다르겠지만 둘 다 다룰줄 알면 더 좋기 때문에 

여러 방법을 적용하며 익히고 있다

 

개인적으론 css파일을 따로 만들 필요 없는 styled-components가 편하긴 하다