CSS-in-JS

자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸미는 방식

✅ styled-components

CSS-in-JS방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지
yarn add styled-components

✅ styled-components 사용하기

꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식
styled.뒤에는 html 태그가 옴

import React from "react";
// styled-components에서 styled 라는 키워드를 import 
import styled from "styled-components";

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트 만들기
const StBox = styled.div`
	// 스타일 코드를 작성(css와 동일)
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`;

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

export default App;

✅ styled-components 강점

JS코드 작성하듯 조건부 스타일링 가능 (if문, switch문, 삼항연산자 등)

✅ styled-components 조건부 스타일링

1. 백틱 안에서 JS코드를 쓸 것이기 때문에 ${ } 열어주고
2. 비어있는 화살표 함수를 만든다 ${( )=>{ }}
3. 함수의 인자에서 props를 받아오고 그것을 return

import React from "react";
import styled from "styled-components";

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

export default App;

✅ switch와 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;