React styled component

지난번에 했던 방식은 css파일을 생성하고, 그 안에 css를 사용해서 컴포넌트를 꾸미는 방식이었다. 그것을 위해서 js파일에서 import를 하고, 컴포넌트에서 return하는 태그들에 대해서 className을 설정해주는 번거로움이 있었다.

보다 간편한 방법으로 style을 적용하고자 나온 것이 styled-components 패키지이다. 이 styled-components패키지는 CSS-in-JS 방식을 채택하고 있다.

패키지란?
React에는 없는 기능이지만, 사용자가 추가로 가져와서 사용할 수 있는 third-party 프로그램을 말한다.

기본적인 사용법은 다음과 같다.

// src/App.js

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;

---

const StBox = styled.div``;

1. styled. 뒤에는 변수화한 html태그가 따라온다.
2. 선언을 하고 나서 ""따옴표가 아닌 ``백틱을 쓰고 양 백틱 사이에 css문법을 사용한다.
3. CSS-in-JS 방식에 따라 css선언문 내에서 JS문법을 자유롭게 사용할 수 있다. 요컨대 if문이나 switch문, 삼항연산자도 활용할 수 있는 것이다.

ex)조건문 활용

// src/App.js

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;

ex)조건문,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;