[React 숙련] Styled Components

Habin Lee·2023년 11월 7일

내배캠React3기-React 문법

목록 보기

6/13

요약

Styled Components의 개요
전역 스타일링에 대해 설명할 수 있다.

Styled Components

개요

Css-in-JS : JavaScript 코드로 css 코드로 작성하여 컴포넌트를 꾸미는 방식
package : 리액트에는 없지만 추가로 외부에서 가져와서 사용할 수 있는 외부 라이브러리(3rd party)

Styled Components 사용 준비하기

extension에서 vscode styled components 설치하기
CRA로 react-app 프로젝트 새로 설치하기
: yarn create react-dpp 파일이름
package 가져오기 -> package.json에 설치한 styled components가 들어가게 됨
: yarn add styled-components
import styled from "styled-components";를 사용하여 import하기

Styled Components 사용해보기

styled 뒤에 .을 붙이고 HTML요소(태그)를 붙여준다.
css방식은 문자열이기 때문에 백틱으로 감싸준다.

// styled-components import하기
import styled from "styled-components";
/* 변수로 선언(StBox)하여 태그로서 사용이 될 수 있는 컴포넌트가 됨
   styled.HTML요소(태그)를 사용하여 return부분의 태그로 사용해준다.
   css방식은 문자열이기 때문에 백틱으로 감싸준다. JS방식 {}과 다름 */
const StBox = styled.div`
  /* css 방식으로 적어준다. */
  width: 100px;
  height: 100px;
  border: 1px solid red;
`
function App() {
  return (
    // 이렇게 만들어진 StBox는 실제 태그로서 사용됨
    <StBox>박스</StBox>
  );
}

export default App;

props를 이용하여 조건부 스타일링

if문은 css 방식에서 사용할 수 없다.
props를 사용하여 조건부로 css를 적용시킬 수 있다.

import styled from "styled-components";

const StBox = styled.div`
  width: 100px;
  height: 100px;
  /* props를 받아줌(백틱 안에 JS를 받아야해서 ${ } 안에 적어준다.(함수모양)) */
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`
function App() {
  return (
    <>
      // 태그 안에 들어간 borderColor를 props로 내려줌
      <StBox borderColor='red'>빨간박스</StBox>
      <StBox borderColor='blue'>파란박스</StBox>
      <StBox borderColor='green'>초록박스</StBox>
    </>
  );
}

export default App;

map과 switch문을 사용하여 Refactoring

import styled from "styled-components";

// 박스들을 감싸주는 div를 가로로 배열될 수 있도록 StContainer를 만들어 감싸주기
const StContainer = styled.div`
  display: flex;
`;

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

// 박스의 색을 배열로 나타낸 변수 선언
const boxList = ['red', 'blue', 'green', 'black'];

// switch함수를 사용하여 색을 넣으면 이름을 반환하는 getBoxName라는 함수를 만들어준다.
const getBoxName = (color) => {
  switch (color) {
    case 'red':
      return "빨간 박스";
    case 'blue':
      return "파란 박스";
    case 'green':
      return "초록 박스";
    default:
      return "검정 박스";
  }
}

function App() {
  return (
    <StContainer>
      {
        /* map 함수를 사용하여 boxList의 색들을 돌아가며 props에 대입해주고,
        해당 박스의 이름을 함께 넣어준다 */
        boxList.map((box)=>{
          return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
        })
      }
    </StContainer>
  );
}

export default App;

전역 스타일링

프로젝트 전체를 아우르는 스타일: 전역적으로(globally) 스타일을 지정한다.

GlobalStyles(전역 스타일링) 예시

// App.js
import styled from "styled-components";
import TestPage from './TestPage';

function App() {
  return (
    <>
      <TestPage
        title="제목입니다"
        contents="내용입니다"></TestPage>
    </>
  );
}

export default App;

// TestPage.jsx
import styled from "styled-components";

function TestPage(props) {
  return (
    <Wrapper>
      <Title>{props.title}</Title>
      <Contents>{props.contents}</Contents>
    </Wrapper>
  );
}

const Title = styled.h1`
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  font-size: 1.5rem;
  margin: 0;
  margin-bottom: 8px;
`;

const Contents = styled.p`
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  font-size: 1rem;
`;

const Wrapper = styled.div`
  border: 1px solid black;
  border-radius: 8px;
  padding: 20px;
  margin: 16px auto;
  max-width: 400px;
`;

export default TestPage;

위의 코드를 사용한다고 했을 때, 아래처럼 중복되는 스타일을 찾을 수 있다.

  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;

폰트와 관련된 부분을 전체적으로 적용시키고 싶을 때 전역 스타일링을 사용하게 된다.
GlobalStyle.jsx 파일을 만들어 아래와 같이 코드를 적어주고

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  // 바디 태그 아래에 있는 것들은 모두 이 스타일로 지정하겠다.
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`

export default GlobalStyle

App.js파일에 export-import하고 < GlobalStyle /> 적어서 데이터를 가져온다.

// App.js
import styled from "styled-components";
import TestPage from './TestPage';
import GlobalStyle from './GlobalStyle';

function App() {
  return (
    <>
      <GlobalStyle></GlobalStyle>
      <TestPage
        title="제목입니다"
        contents="내용입니다"></TestPage>
    </>
  );
}

export default App;

// TestPage.jsx
import styled from "styled-components";

function TestPage(props) {
  return (
    <Wrapper>
      <Title>{props.title}</Title>
      <Contents>{props.contents}</Contents>
    </Wrapper>
  );
}

const Title = styled.h1`
  font-size: 1.5rem;
  margin: 0;
  margin-bottom: 8px;
`;

const Contents = styled.p`
  margin: 0;
  font-size: 1rem;
`;

const Wrapper = styled.div`
  border: 1px solid black;
  border-radius: 8px;
  padding: 20px;
  margin: 16px auto;
  max-width: 400px;
`;

export default TestPage;

이렇게 깔끔하게 정리할 수 있다.

Sass(Syntactically Awesome Style Sheets)

CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어
: 코드의 재 사용성을 높이고 가독성도 향상시켜줄 수 있는 방법!

Sass 특징

스타일에 들어갈 수 있는 내용들을 변수화 하여 사용할 수 있다.

// 변수화된 스타일
$color: #4287f5;
$borderRadius: 10rem;

div {
	background: $color;
	border-radius: $borderRadius;
}

중첩하여 사용할 수 있다.(Nesting)

label {
      padding: 3% 0px;
      width: 100%;
      cursor: pointer;
      color: $colorPoint;
	  // 중첩 가능
      &:hover {
        color: white;
        background-color: $color;
      }
}

다른 style 파일을 import 할 수 있다.

// common.scss
// colors 목록
$color1: #ed5b46;
$color2: #f26671;
$color3: #f28585;
$color4: #feac97;

//style.scss
// common.scss를 import하여 사용
@import "common.scss";

.box {
	background-color: $color3;
}

CSS Reset

default style : 우리가 따로 style을 주지 않아도 기본적으로 주어지는 style
-> 웹 브라우저마다 조금씩 다르게 제공됨 -> 제거해줄 필요가 있다.(초기화)
CSS RESET : default style를 제거하는 방식
-> 초기화 하는 방법은 여러 가지가 있지만, 아래 코드를 한번 사용해보자.
reset.css파일을 하나 만들어 아래 내용을 적어준다.

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

App.js파일에 reset.css파일을 import해주면 default style이 제거된다.

import "./reset.css"

function App() {
  return (
   <div>
    <span>default Style 테스트</span>
    <h1>이건 h1 태그입니다.</h1>
    <p>나는 p 태그입니다.</p>
   </div>
  );
}

export default App;