23.06.19) React-styled Components(전역 스타일링)

📌CSS-in-Js방식

: 자바스크립트 코드로 css 작성 → 컴포넌트 꾸미기 가능 (styled Components 패키지 사용)

 

*이전 스타일링 방식 : 컴포넌트 생성→ css파일 생성 후 import → html태그마다 className부여→ 작성

👉styled-components 사용방법: VScode-styled-components 플러그인 설치→ vscode 터미널 (yarn add styled-components) 패키지 설치 →styled import

 

👉styled-components 사용 예시)

import "./App.css";
import { styled } from "styled-components"; //import 필수

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

function App() {
  return <div>박스</div>;
}

export default App;

• StBox를 div대신에 삽입 (styled.뒤에는 항상 html요소가 온다)

// 수정 후 

function App() {
  return <StBox>박스</StBox>;
}

 

 

✅styled-components의 장점 : 조건적으로 스타일링 가능함 (= 조건부 스타일링)

1. props를 통해서 조건부 스타일링

  : styled-components도 말 그대로 컴포넌트기 때문에 부모 컴포넌트에서 자식 컴포넌트로 정보전달이 가능함

 

*예시코드)

import "./App.css";
import { styled } from "styled-components";

// 1. styled-components 생성
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; / *3.부모 컴포넌트에서 보낸 props를 받아 사용*/ 
  margin: 20px; 
`;

function App() {
  return (
    <>
    {/* 2. 위에서 만든 styled-components를 사용-> props를 통해 borderColor라는 값을 전달함 */}
      <StBox borderColor="red">빨간박스</StBox>;
      <StBox borderColor="blue">파란박스</StBox>;
      <StBox borderColor="green">초록박스</StBox>;
    </>
  );
}

export default App;

  ▷borderColor를 props로 자식컴포넌트 StBox(=styled-components)에 전달

  ▷StBox에서 자바스크립트 코드를 사용하기 위해 ${}(백틱안에서 쓰이기 때문) 열어준 후 화살표 함수 생성

  ▷함수의 인자 input에 props를 받아오고 props안에는 부모 컴포넌트에서 보낸 props값(borderColor)이

    있는데 그것을 return한다.

 

 

2. switch, map을 이용해서 조건부 스타일링

 

*예시코드) 박스 색을배열에 담아서 색을 넣으면 이름을 반환해주는 함수만들기 

//박스의 색 (변수로 관리하기)
const boxList = ["red", "blue", "green"];

//이 이름들이 박스 색깔에 대해서 표현하고 있으므로 이것을 표현하는 함수 만들기

<StBox borderColor="red">빨간박스</StBox>
<StBox borderColor="blue">파란박스</StBox>
<StBox borderColor="green">초록박스</StBox>

//색을 넣으면, 이름을 반환
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간박스";
    case "blue":
      return "파란박스";
    case "green":
      return "초록박스";
    default:
      return "검정박스";
  }

  ▷ input을 color로 받음

const boxList = ["red", "blue", "green"];

  ▷ switch문을 이용해서 color가 하나씩 돌면서 ex) red면 return을 빨간박스 이렇게 받는다.

      즉, getBoxName은 input에 들어온 color가 이름 세 개 중 하나가 들어오면 리턴한다

      (세개가 다 안들어오면 default값 retrun)

function App() {
  return (
    <StContainer>
      {/* <StBox borderColor="red">빨간박스</StBox>*/}
      {boxList.map((box) => {
        return <StBox borderColor={box}>{getBoxName(box)}</StBox>;
      })}
    </StContainer>
  );
}

 ▷ boxList를 map함수 이용 : boxList.map()안에 인자 box를 넣어보면 box에는 boxList의 color가 하나씩 할당

 ▷ 주석처리했던 borderColor="red” → borderColor안에 {box} 로 변경

 ▷빨간박스 대신에 이미 이름을 반환하는 getBoxName을 넣어주고  input값()에는

    color가 하나씩 할당되어있는 인자 box를 넣어주면 된다.

 

 

 

📌Globalstyles (전역 스타일링), Sass (사스), css reset

👉Globalstyles (전역 스타일링)

: Globalstyles와 styled components 차이점 

  1. styled components는 컴포넌트 내에서만 활용

  2. Globalstyles는 프로젝트 전체

 

*예시코드)

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

따로 GlobalStyle.jsx 파일 생성 후 import createGlobalStyle 

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

▷ 공통적으로 적용해야 할 스타일이 생기면 createGlobalStyle API를 사용해서 적용

 

 

👉Sass (사스) ⇒Syntactically Awesome Style Sheets

: 강력하고 효율적인 css작성 방식

styled components는 프로젝트 규모가 커질수록 재사용하기 불편하기 때문에

특정한 스타일을 가지고 있는것을 하나 만들면 그것을 계속해서 import해서 사용 (유지보수면에서 편리함)

▷코드의 재사용성을 높이고, 가독성 또한 향상시켜줄 수 있는 방법

 

👉css reset (default style을 제거하는 방식)

: 프로젝트를 만들어서 진행할 땐 기본적인 style이 들어간다 (default style 적용)

 ex) <div>, <h1>, <p>등 따로 style값을 주지 않아도 기본적으로 들어가는 태그들이 있다.

       그래서 default style을 제거하는 방식

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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