CSS-in-Js란? -Styled Components사용법-23.11.07

 

 

리액트를 배우면서 이번에는 좀 더 간편하게 컴포넌트를 꾸밀 수 있는

CSS-in-Js방식에 대해 배웠습니다

단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식입니다

CSS-in-JS 방식을 사용하기 위해 우리는 새로운 패키지를 사용해야 하는데 이번 에는

 

Styled Components 를 사용해 보았습니다

styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지입니다 입니다

다른 패키지들도 있지만 다른 개발자들도 많이 사용하기에 시작은 이 styled-components로 시작해 봅니다

 

참고로  패키지란, React에는 없는 기능이지만 우리가 추가로 가져와서 사용할 수 있는 써드파티 프로그램 입니다.

패키지들은 누군가에 의해 만들어진 것으로 npm에 모여 있습니다. React에서 자체적으로 제공하지 않지만, 

사용하고자 하는 패키지를 npm install 또는 yarn add 를 통해서 설치해서 사용할 수 있습니다

 

vs코드에서 확장 마켓플레이스에서  vscode-styled-components-snippets 플러그인 설치 후

저는 현재 yarn 사용 중이기에 터미널에서 를 실행하여 설치합니다

yarn add styled-components

 

package.json 파일에 들어가 보면 잘 다운로드하여진 걸 확인할 수 있습니다 

간단하게 예시를 작성해 보았는데 일단 

import styled from "styled-components";

 

를 import해준 후 

styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다.

StBox를 const로 할당해 줍니다   const StBox = styled.div를`` 백틱으로 감싼 후에 스타일 코드를 작성합니다

스타일 코드는 우리가 알고 있는 css와 동일합니다.

그리고 우리가 만든 styled-components를 JSX에서 html 태그를 사용하듯이 사용합니다.

그리고 styled. 뒤에는 html의 태그가 옵니다.

아래처럼 내가 원하는 html 태그를 사용해서 styled-components를 만들 수 있습니다.

div ➡️ styled.div

span ➡️ styled.span

button ➡️ styled.button

---

조건부 스타일링

classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-components를 이용하면 간편하게 할 수 있습니다. 만약에 스타일 코드를 작성할 때 if문 , switch문, 삼항연산자를 사용할 수 있다면?

 CSS-in-JS 방식의 강점이 바로 스타일 코드를 JS코드 작성하듯이 스타일 코드를 작성할 수 있다는 점입니다.

 props를 사용하여 각각의 박스마다 다른 css를 구현해 보았습니다 

빨간 박스 StBox안에 보더 컬러 백그라운드 컬러에 각각 색을 ""안에 입력 후 

App라는 부모 컴포넌트에서 보더컬러를 props로 자식컴퍼는 트인  styled-components의 StBox

에 전달하면 오른쪽과 같은 결과가 렌더링 됩니다

---

GlobalStyles(전역 스타일링)

styled components는 컴포넌트 내에서만 활용할 수 있습니다. 하지만 가끔 우리는 프로젝트를 아우르는,

공통적으로 들어가야 할 스타일을 적용해야 할 필요도 있습니다. 그럴 경우 ‘전역적으로(globally)’ 스타일을 지정한다.

라고 표현하는데요. 그럴 때 적용하는 방법이 바로 전역 스타일링입니다

디폴트 스타일 테스트

이번에는 css reset을 해보았습니다 각각 브라우저는(크롬, 사파리, 파이어폭스 등등..) default style을 제공합니다

 margin이나 글자의 크기 등등. 아래에 사진을 보면 마진값을 설정해 놓은 적은 없지만 기본적으로 21.440이 설정되어 있네요

 

다양한 웹브라우저들은 저마다 조금씩은 다른 default style을 제공하고 있기 때문에 이를 초기화하고 우리가 정하는 대로만 표현되는 것이 중요합니다

src 폴더에 reset.css 파일을 만들고 아래 코드를 싹 집어넣은 후 

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;
}

 

import를 통해 적용시켜보니 <h1> 태그 상관없이 똑같은 글자크기로 표시되는 것을 볼 수 있습니다

 

아직은 규모가 작은 프로젝트만 진행 중이지만 규모가 커지면 커질수록 일일이 해야 하는 

하드코딩 css보다는 이런 스타일 컴포넌트를 적용하는 방식이 유리 해질 거 같습니다