[React] 스타일 컴포넌트 (CSS-in-JS)

1. 스타일 컴포넌트 사용 방법

 

백틱 안에서 스타일 코드를 작성한 뒤,

이렇게 태그 형식으로 스타일을 줄 수 있다.

 

If 문, 삼항연산자 등의 자바스크립트 문법을

사용할 수 있다는게 가장 큰 장점이다.

 

  const StBox = styled.div`
    width: 200px;
    height: 200px;
    border: 1px solid red;
    margin: 20px;
  `
  
    return (
    <StBox>
      Hello
    </StBox>
  );

 

 

 

porps의 값에 따라 선택된 항목만 스타일 변경을 줄 수 있다.

// 1. styled-components를 만들었습니다.
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor}; // 4.부모 컴포넌트에서 보낸 props를 받아 사용합니다. 
  margin: 20px;
`;

const App = () => {
  return (
    <div>
			{/* 2. 그리고 위에서 만든 styled-components를 사용했습니다. */}
			{/* 3. 그리고 props를 통해 borderColor라는 값을 전달했습니다. */}
      <StBox borderColor="red">빨간 박스</StBox>
      <StBox borderColor="green">초록 박스</StBox>
      <StBox borderColor="blue">파랑 박스</StBox>
    </div>
  );
};

 

 

 

그리고 반복되는 태그들을 map함수로

관리의 용이성을 더해줄 수 있다.

 

// src/App.js

import React from "react";
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>
  );
};

export default App;

 

 

 

2. 전역 스타일링

공통된 스타일을 적용시킬 때에는

const GlobalStyle = createGlobalStyle``

 

해당 createGlobalStyle API를 활용하여

`` 백틱 안에 스타일 코드를 작성해주면 된다.

 

 

3. Sass (Syntactically Awesome Style Sheet)

코드의 재사용성을 높이고

가독성을 향상시킬 수 있는 CSS 언어

 

(1) 변수 사용

color 값이나 borderRadius등

수치를 저장해서 값을 변수로 할당할 수 있다.

이는 재사용성을 높이고 human Erorr를 줄여준다.

 

(2) Nesting

중첩해서 사용 가능하다.

 

(3) import export

변수만 저장해놓은 파일과

스타일을 작성한 코드를 분리하여

가독성을 향상시킬 수 있다.