Front End/React

Styled Components & Css Reset

토끼는당근당근 2023. 5. 3. 21:56

지금까지 컴포넌트를 꾸미기 위해서는 css 파일을 생성하고 각 tage마다  classname을 넣고 그 class에 따라서 CSS 코드를 작성해줘야만 했다.

이런 과정을 조금더 쉽게 하기 위해 Styled-Components라는 package를 사용하여 css를 꾸며보기로 한다.

 

 

1. Styled Components 기본 원리

우선 styled components는 CSS-in-Js 방식이다.

CSS-in-Js는 말 그대로 Js로 CSS를 작성하는 것이다. 즉, Js로 컴포넌트를 꾸미는 것이다.

이 때 사용하는 package들은 엄청 많지만 (예. emotion, tailwindcss 등) 가장 오랫동안 사랑받아왔고 현재도 많이 쓰고 있는 Style-Components를 사용해볼 것이다.

 

먼저 꾸미고자 하는 컴포넌트를 styled-components 방식대로 만들고, 그 안에 스타일 코드를 작성하는 방식으로 진행한다.

아래의 형태를 갖는다.

  1. styled를 import 한다.
  2. styled components 를 담고 있는 부모 컴포넌트를 만든다.
    • 컴포넌트이기 때문에 변수는 대문자로 시작한다.
    • styled. 뒤에는 div, p, span 등 html 태그 요소가 들어간다.
    • css문을 문자열 형태로 집어 넣기 때문에 백틱(` `)을 사용한다.
  3. 자식 컴포넌트에서 불러서 사용한다.

 

styled components 기본 구조

 

 

2. Styled Components 사용법

styled components를 쓰기 전에! 우선 설치를 해야한다.

yarn add styled-components

 

1) 기본 Styling

기본 사용법은 위의 기본 구조와 다를 것이 없으므로 예시만 보고 넘어간다.

 

styled components 예시 (1) - 기본 구조

 

2) 조건부 Styling

style-components는 컴포넌트의 속성을 갖고 있기 때문에 props도 받을 수 있다.

또한, Js 방식으로 CSS를 작성하는 것이므로 if, switch, map 등을 적용할 수 있다.

 

우선은 props를 적용하는 것을 살펴보자.

박스의 색상을 여러개 하여 동일한 모양을 찍어내고 싶다면 아래처럼 props를 내려준다.

백틱 안에 들어가는 props의 경우 JS이므로 ${ } 사용은 잊지말자!!!

 

styled components 예시 (2) - props 적용

 

위의 경우처럼 하나하나 쓰는 것보단 역시 map 을 활용하여 반복하는 것이 더 효율적이다.

아래의 방식처럼 switch 문과 map을 섞어서 사용할 수도 있다.

 

styled components 예시 (3) - map, switch 적용

 

3) 전역 Styling

지금까지 특정한 컴포넌트를 지정하여 스타일링하는 방법을 확인했다면, 이번에는 globally하게 스타일링하는 방법을 보자.

프로젝트 내에서 반복적으로 사용하는 css요소는 전역적으로 지정하는 것이 가독성에도 코드 작성에도 훨씬 이로울 것이다.

createGlobalStyle 이라는 API를 import해서 어떤 태그 아래부터 적용할 요소인지 선택할 수 있다.

styled components 예시 (4) - 전역 스타일링 예시

 

 

3. CSS Reset

컴포넌트를 예쁘게 꾸미다보면 각 태그 별로 style을 갖고 있다는 것을 알 수 있다. 이런 스타일을 default style이라고 한다.

이 style은 브라우저(chrome, edge 등)마다 다를 수 있기 때문에 default style을 초기화 시켜줘야 한다.

이 방식을 CSS Reset 이라고 한다.

 

reset.css라는 파일을 만들고 reset하기 위한 요소를 넣은 다음 index.js에서 불러주면된다.

 

CSS Reset 예시

 

reset 하기 위한 코드이다.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}