[React] Styled Components 시작하기, styled-reset 추가 하기

🤔 Styled Component 왜 필요할까?

 

CDD기반의 개발을 하기 위해선, CSS를 컴포넌트화 시킬 필요가 있다. (지금 이 문장이 이해가 가지 않는다면, 링크의 글을 먼저 읽는다)

 

리액트를 사용함으로써 우리는 기본적으로 html과 js 코드를 한방에 jsx로 묶을 수 있다.

그렇지만 css는 리액트 기본 기능으론 컴포넌트로 쪼개서 jsx 파일에 담을 수는 없다.

이것을 가능하게 해주는  Styled Component라는 귀한 분을 모셔와야 한다.

 

우리는 React와 Styled Component 이 빛과 같은 두분으로

뿔뿔이 흩어져 있던 html + css + js 코드를  js하나로(jsx도 사실 js코드이므로) 묶을 수 있게 된다.

1+1+1 = 1 이 되는 기적!!

 

---

🔥 Styled Component 시작하기

 

먼저 npm으로 styled component를 설치한다.

 

# with npm
$ npm install --save styled-components

# with yarn
$ yarn add styled-components

 

Styled Components에서 권장하는대로 package.json에 다음 코드를 추가한다.

이 코드를 추가하면 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄일 수 있다.

 

{
  "resolutions": {
    "styled-components": "^5"
  }
}

 

그 다음 다운받은 Styled Components를 import 시킨다.

 

import styled from "styled-components"

 

---

 

🎀 스타일링된 컴포넌트 만들기

 

const Button = styled.button`
	background-color:blue;
    color:white;
`;

 

이렇게 작성하면 스타일링된 button태그가 컴포넌트로 생성된다.

이렇게 만든 스타일링된 컴포넌트는 원하는 곳에 아래처럼 다른 컴포넌트처럼 붙여넣으면 끝난다.

 

import styled from "styled-components"

const Button = styled.button`
	background-color:blue;
    color:white;
`;

const App = ()=>{

	return (
    	<>
        	<Button>버튼</Button>
        </>
    )

}

 

 

이때 아래 사항들에 주의한다.

• 스타일마다 세미콜론(;)을 꼭 작성해야 한다.
• 백틱(`)을 사용해서 정의한다.

 

---

 

🥚 만든 컴포넌트로 새로운 컴포넌트 파생시키기

 

 

const Button = styled.button`
	background-color:blue;
    color:white;
`;


const BigButton = styled(Button)`
	padding: 10px;
    margin-top: 10px;
`;​

 

새로 스타일링된 컴포넌트를 만들때, styled.태그명 을 사용해서 만들었다면,

그렇게 만든 컴포넌트로 약간 다른 컴포넌트를 파생시키고자 한다면,

styled(컴포넌트)를 사용할 수 있다.

 

그럼 원래의 컴포넌트는 그대로 있고, 새롭게 그에 몇가지 CSS속성을 더한 BigButton이라는 컴포넌트도 활용할 수 있다.

 

---

 

📌 특정 props가 있을 때와 없을때, 조건부로 스타일링하기

 

예를들어서 만들어놓은 button에 active라는 클래스가 붙으면, 버튼의 색상이 red로 변해야 되는 경우를 생각해보자.

 

const Button = styled.button`
    color:white;
    background-color:${(props) => props.active ? "red" : "blue"};
`;

 

이렇게 설정해 놓으면  props.active가 있다면 red가 없다면 blue가 리턴되어서

각 상황에 맞게 설정이 될것이다.

정말 편리하다.

 

이런 부분은 css로 순수하게 작성하면 어떨지 아래의 더보기를 참고한다.

css로 작성하면 다음과 같이 클래스가 붙었을때 스타일링을 덮어쓰도록 작성해야한다.

이럼 당연히 코드를 처음보는 사람은 active되었을때 스타일링 코드를 따로 찾아야 했을 것이다.

.button{
	color: white;
    background-color: blue;
}

.button.active{ //보통은 이렇게 class로 추가하여 효과를 주었다.
	background-color: red;
}

 

이런식으로 작성하고 아래와 같이 확인해볼 수 있다.

 

const Button = styled.button`
    color:white;
    background-color:${(props) => props.active ? "red" : "blue"};
`;

const App = ()=>{

	return (
    	<>
        	<Button active>버튼</Button> {/*<빨간색 버튼*/}
            <Button>버튼</Button> {/*<파란색 버튼*/}
        </>
    )

}

 

---

 

📌 특정 props를 사용해서 스타일링하기

 

const Button = styled.button`
    color:white;
    background-color:${(props) => props.color ? props.color : "white"};
`;

 

위와 같은 코드를 작성하면 props로 설정한 color자체가 바로 스타일링의 색상으로 들어간다.

만약 color가 설정되어 있지 않다면 white로 설정해버린다.

 

const Button = styled.button`
    color:white;
    background-color:${(props) => props.color ? props.color : "white"};
`;

const App = ()=>{

	return (
    	<>
        	<Button color="orange">버튼</Button> {/*<오렌지색 버튼*/}
            <Button color="tomato">버튼</Button> {/*<토마토색 버튼*/}
        </>
    )

}

 

---

 

📌 전역 스타일 설정하기

 

컴포넌트 단위로 스타일링을 하다보니, 그럼 모든 컴포넌트에서 공유해야할

css변수나, reset 코드 등등은 어떻게 설정하면 좋을까?

 

아래와 같이 createGlobalStyle을 import해와서 만들어주면 된다.

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button {
	padding : 5px;
    	margin : 2px;
    	border-radius : 5px;
	}
`

 

작성시 주의사항은..

• createGlobalStyle를 import해줘야 한다.
• createGlobalStyle`` 백틱안에 작성한다.

 

이렇게 작성한 전역 스타일은 아래와 같이

모든 컴포넌트에 앞서서 해당 컴포넌트를 붙여줌으로써 적용시킬 수 있다.

 

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
	button {
	padding : 5px;
    	margin : 2px;
    	border-radius : 5px;
	}
`

function App() {
	return (
		<>
			<GlobalStyle /> {/* 🛑 여기에!!! */}
			<Button>전역 스타일 적용하기</Button> 
		</>
	);
}

 

정말 쉽기 짝이 없다. 

 

---

 

📌 reset css 쉽게 추가하기

 

styled component에서 reset css를 좀더 스마뚜하게 작성하는 방법이 없을까 찾다가 새로운 친구를 알게되었다.

바로 styled-reset이란 모듈을 사용하는 방법이다.

 

일단 styled-reset을 다운받는다.

 

npm i styled-reset

 

그리고 createGlobalStyle안에 reset을 추가한다.

아주 간단하다. 

 

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset"

const GlobalStyle = createGlobalStyle`
	${reset} {/* 🛑 이거 한방으로 reset끝 */}
`

function App() {
	return (
		<>
			<GlobalStyle /> 
			<Button>전역 스타일 적용하기</Button> 
		</>
	);
}

 

실제 진행중인 개인 프로젝트에서 사용한 모습을 아래에 예시로 첨부한다.

 

import { createGlobalStyle } from 'styled-components';
import reset from "styled-reset"

const GlobalStyle = createGlobalStyle`
    ${reset}
    :root {
        --retro-blue: #00B7AF;
        --cherry-red: #FF3011;
        --muted-orange: #F98700;
        --vintage-pink: #FC9994;
        --dark-retro-blue: #00A0A2;
        --midnight-black: #181617;
        --ivory: #EEEAE2;
        --symbol_first-bar: var(--cherry-red);
        --symbol_second-bar: var(--retro-blue);
        --symbol_third-bar: var(--muted-orange);

        --gutter: 20px;
    }
`
export default GlobalStyle

 

---

🙌🏻  추가로...

 

여기까지 사용했어도 놀라울정도로 깔끔하고 편리해서 아주 흡족스러운데,

sass에서 편리했던 문법들은 또 그대로 들고온다.

 

예를 들어 hover효과를 설정할 때, 바깥에 또 설정할거 없이 &로 자기자신을 가리켜 사용할 수 있다.

const Button = styled.li`
    display: block;
    height: 45px;
    width: 45px;
    cursor: pointer;
    transition: 0.3 ease-in-out;
    &.showIfDefault:hover { //Button에 showIfDefault라는 클래스가 붙어있을경우 hover 붙이기
        transform: rotate(-6deg);
    };
`

 

amazing... 이제까지 난 얼마나 원시적인 css를 사용했던가....

사실 회사에서 sass를 사용해봤을때 이게 편한게 맞긴한가? 라는 생각이 들곤했는데

styled-component는 정말 확실하게 편리한거 같다..

 

하지만 이런 Styled-Component라고 장점만 있는 것은 아니다.

장단점 마지막으로 정리하고 끝내자!

 

장점	단점
- 컴포넌트 안으로 CSS를 캡슐화 하면서 class명 네이밍하느라 머리아프지 않아도 된다. (자동으로 유니크한 해시값이 들어감)	-빠른 페이지 로드에 불리하다. -CSS 작성을 위해 여러 라이브러리를 사용하게 되므로, 번들의 크기가 커진다.

 

대단해~~~~