[React 숙련] 1주차_styled-components

오늘의 학습내용 :  styled 컴포넌트

 

◆ CSS in JS

 

CSS in JS는 스타일의 정의를 자바스크립트로 작성된 컴포넌트에 바로 삽입하는 방식이다. 쉽게 말해 자바스크립트 코드로 css 코드를 작성하여 컴포넌트를 꾸밀 수 있다고 생각하면 좋다. 이전까지 배웠던 style 관련 코드를 작성할 때에는 css 파일을 생성하고 이를 import 했지만, 조금 더 간편한 방법으로 컴포넌트 꾸미기가 가능하다.

왜 이런 방식의 개발이 주류가 될까?
기존에는 HTML, CSS, JS를 별도의 파일로 정리하는 방법을 선호했지만, React 등 모던 자바스크립트 라이브러리가 등장하면서 웹 애플리케이션을 재사용하기 편리한 여러 블록으로 분리하여 개발하는 컴포넌트 기반의 방식이 많이 쓰이게 되었다. 웹 페이지를 여러 개의 컴포넌트로 분리하고 각각에 HTML, CSS, JS를 삽입하여 사용할 수 있다. React의 경우, 이미 JSX를 통해 자바스크립트 안에 HTML을 포함시킬 수 있고, 여기에 CSS in JS 라이브러리를 통해 CSS까지도 자바스크립트에 포함시킬 수 있다! (참고: https://www.daleseo.com/react-styled-components/)

 

 

 

◆ styled components

 

// vscode 터미널에서 명령어 입력하기
yarn add styled-components

 

StBox 적용하기

 

import "./App.css";
// styled-components에서 styled를 import 한다.
import styled from "styled-components";

// styled를 사용해서 div 스타일 컴포넌트를 만든다.
const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
  background-color: red;
  color: white;
  box-shadow: 2px 2px 2px gray;
`;

// 만들어진 styled-components를 html 태그처럼 사용할 수 있다.
function App() {
  return (
    <>
      <StBox>Box</StBox>
    </>
  );
}

export default App;

 

 

Styled Components는 React 컴포넌트에 넘어온 props에 따라 다른 스타일을 적용할 수 있다. Template Literals을 통해 함수도 문자열 안에 포함시킬 수 있는데, 원하는 컴포넌트에 props로 정보를 전달하면 된다.

 

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
  background-color: ${(props) => props.backgroundColor};
  color: white;
  box-shadow: 2px 2px 2px gray;
`;

function App() {
  return (
    <>
      <StBox borderColor="red" backgroundColor="red">
        Red Box
      </StBox>
      <StBox borderColor="green" backgroundColor="green">
        Green Box
      </StBox>
      <StBox borderColor="blue" backgroundColor="blue">
        Blue Box
      </StBox>
    </>
  );
}