Styled-components

JavaScript 기반의 프론트엔드 라이브러리에서
CSS를 작성하고 관리하는 데 도움을 주는 라이브러리

CSS-in-JS 방식을 사용하여 자바스크립트 코드로 CSS 코드를 작성하여
컴포넌트를 꾸밀 수 있음.

• 장점
  스타일과 로직이 같은 파일내에 있어 유지보수가 쉬움
  props를 사용하여 동적으로 스타일을 꾸며줄 수 있음

• 단점
  기존 사용자가 새로운개념을 익히는데 시간이 필요

준비

1. VSCode에서 확장(Extensions)에서 vscode-styled-components설치

2. VSCode 터미널에서 명령어 입력(yarn 기준)
   yarn add styled-components

사용방법

기본 사용법

import styled from "styled-components";
//styled-components에서 styled 를 import함
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;
//스타일을 설정할 변수 만들고 .styled.(태그)`스타일내용을 백틱안에 `

const App = () => {
  //  styled-components를 JSX에서 html 태그를 사용하듯이 사용
  return <StBox>박스</StBox>;
};

조건부 스타일링

기본

import styled from "styled-components";

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; 
  margin: 20px;
`;//StBox에서 red,green,blue를 props로 받아서 StBox 보더색상을 바꿈

const App = () => {
  return (
    <div>

      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
//StBox에게 borderColor라는값을 내려줌.

  );
};

심화

import styled from "styled-components";

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", "green", "blue"];
//색을 담고 있는 박스 리스트


const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "green":
      return "초록 박스";
    case "blue":
      return "파란 박스";
    default:
      return "검정 박스";
   }
};// 매개변수(색)가 들어오면, 이름을 반환해주는 함수 
const App = () => {
  return (
    <StContainer>
			{/* map을 이용해서 StBox를 반복하여 화면에 그립니다. */}
      {boxList.map((box) => (
        <StBox borderColor={box}>{getBoxName(box)}</StBox>
      ))}
    </StContainer>
//위에서 만든 StContainer로 박스들을 감싸고 
//그안에 {}함수표현식으로 색깔을 담은 boxList들을 맵으로 순회함.
//맵으로 순회중인 Box하나하나를 borderColor라는 이름으로
//박스스타일을 담고있는 StBox로 내려줌. props로 받아서 solid색 동적으로 적용
//getBoxName()함수로 매개변수box를 보내고 
//들어온 값에 따라 스위치문 케이스에 맞게 글씨들을 리턴해줌
  );
};

전역 스타일링

애플리케이션 전체에 걸쳐 공통으로 적용되는 스타일을 정의하는 방법
주로 기본적인 레이아웃, 글꼴, 색상, 리셋 스타일 등을 설정

//GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;
//GlobalStyle이라는 바디전체를 스타일링하는 변수를 내보냄.

export default GlobalStyle;

//BlogPost.jsx
function BlogPost({ title, contents }) {
  return (
    <>
      <p>{title}</p>
      <p>{contents}</p>
    </>
  );
}

export default BlogPost;

//App.jsx
import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}
//가장 상위요소인 App에 GlobalStyle을 자식요소로 가져와서 적용했지만
//어느 위치에 상관없이 렌더링되서 전역스타일을 적용함
//단 최상위요소에 배치하는 이유는 명확성, 관리의 용이성때문임.
export default App;

css reset

브라우저는 기본적으로 자신들만의 default style을 제공.
그래서 브라우저 간의 스타일 차이를 없애기 위해
모든 기본 스타일을 제거하는 CSS 기법

normalize.css 사용

1. 터미널에서(yarn기준) yarn add normalize.css 입력

2. 리액트 프로젝트에 normalize.css 포함
   설치가 완료되면, index.js 또는 App.js 파일에서 normalize.css를 import

import 'normalize.css';

CSS 리셋을 직접 정의

1. 리셋 CSS 파일 작성
   프로젝트 폴더에 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;
}

2. 리액트 프로젝트에 reset.css 포함
   생성한 reset.css 파일을 index.js 또는 App.js 파일에서 import
   
   

GlobalStyle을 사용하여 CSS 리셋

styled-components를 사용하고 있다면,
createGlobalStyle을 사용하여 전역 스타일에 CSS 리셋을 적용 가능.

1. 터미널에서(yarn기준) yarn add styled-components 입력

2. GlobalStyle 정의 및 적용

// GlobalStyle.js
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  /* 리셋 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;
  }
`;

export default GlobalStyle;

3. 상위컴포넌트에 임포트

import GlobalStyle from './GlobalStyle';