2023.03.03) 항해 26일차 (1-CSS-in-JS,전역스타일링)

styled-components 자체는 크게 어렵지 않았다.

문법자체도 달라지는게 없었기에 수월하게 할 수 있었지만,

새로 배운 개념이기에 정리를 해봤다.

 

1) CSS-in-JS

CSS-in-JS방식이란, 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식이다.

순수한 CSS코드를 우리가 아니라, 자바스크립트를 이용해서 CSS코드를 만들어내는 것이다.

CSS-in-JS 방식을 사용하기 위해 

플러그인 설치 후, 터미널에서 styled-components를 설치해준다.

// 터미널에서 아래 명령어로 설치
yarn add styled-components

① styled-components 사용하기

classname을 사용해서 구현하기는 조금 까다로운 조건부 스타일링을 styled-components를 이용하면 간편하게 할 수 있다.

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

 

props는 부모 컴포넌트에서 자식 컴포넌트로 어떤 정보를 전달하고자 할 때 사용한다.

styled-components도 말 그대로 컴포넌트 이기에,

box에 prosp를 통해서 border color에 대한 정보를 전달해줄 수 있다.

 

즉, props를 통해서 부모 컴포넌트로부터 값을 전달받고, 조건문을 이용해서 조건부 스타일링을 할 수 있다.

// src/App.js

import React from "react";
import styled from "styled-components"; //해주어야 적용이 된다.

const StContainer = styled.div` //styled. 뒤에는 html 요소가 오고 `백틱을 사용한다.
  display: flex;
`;

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; //props를 받는다.
  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>
  );
};

export default App;

 

2) 전역 스타일링 ( 그 외 Sass, css reset)

① 전역 스타일링

공통적으로 들어가야 할 스타일을 적용해야 할 상황도 있다.

그럴 경우 ‘전역적으로(globally)’ 스타일을 지정한다고 하는데, 그럴 때 적용하는 방법이 바로 전역 스타일링이다.

이 때, 공통적으로 적용되는 스타일링 부분은 빼줄 필요가 있다.

//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.jsx
import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;

이렇게 적용을 시킨다.

 

② Sass

CSS를 전통적인 방법보다 효율적으로 사용하기 위해 만들어진 언어이다.

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

// 변수 사용
$color: #4287f5;

div {
	background: $color;
}
//중첩 사용
label {
      color: $colorPoint;
      
      &:hover {
        color: white;
      }
}
//다른 style 파일 import
//common.scss
$color1: #ed5b46;
$color2: #f26671;
//style.scss
@import "common.scss";

.box {
	background-color: $color3;
}

③ css reset

브라우저는 기본적으로 default style을 제공한다.

하지만, 다양한 웹브라우저들은 저마다 조금씩은 다른 default style을 제공하고 있기에,

이를 초기화하고 우리가 정하는대로만 표현될 수 있도록 하는 방법도 알아야 한다.

=> reset.css코드를 작성해 적용시키면  default style이 적용되지 않는다.