[TIL] Styled Components

Styled Component란?

👉 styled-components는 우리가 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지!

Styled Components 준비

(1) VSCode Extension 설치
이 익스텐션을 설치하면 styled-components안에서 스타일 코드를 편하게 작성할 수 있다!

(2) styled-components 설치
npm install styled-components 또는
yarn add styled-components

Styled Components 사용

(1) 기본적인 사용법

styled components의 기본적인 원리는 꾸미고자 하는 컴포넌트를 styled components의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식이다.

// App.js

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

// styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. 
const StBox = styled.div` 
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 20px;
`; // 이 안에 스타일 코드를 작성한다. 스타일 코드는 우리가 알고 있는 css와 동일하다.

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

export default App;

핵심 : const StBox = styled.div``;
styled 뒤에는 html 태그가 온다.
ex) styled.span, styled.button

(2) 조건부 스타일링

styled-components도 이름 그대로 컴포넌트이다. 그러므로 우리는 각 컴포넌트에게 props를 통해 borderColor에 대한 정보를 전달해줄 수 있다.

import "./App.css";
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;
`;

function App() {
  return (
    <StContainer>
      <StBox $borderColor="red">안녕</StBox>
      <StBox $borderColor="blue">안녕</StBox>
      <StBox $borderColor="green">안녕</StBox>
    </StContainer>
  );
}

export default App;

[동작하는 과정]
1. 먼저 자바스크립트 코드를 사용하기 위해 ${ } 를 열어줍니다.
2. 비어있는 화살표 함수를 열어 줍니다. ${( )=>{ }} 이렇게!
3. 함수의 인자에서 props를 받아오고, props안에는 부모 컴포넌트에서 보낸 borderColor가 있다. 그것을 return 한다.
4. ${(props)⇒{ return props.$borderColor }} 이렇게 리턴하면 (props)⇒{ return props.$borderColor } 의 값이 === 'red' 가 되고 결국 우리 눈에는 복잡해보이지만, 브라우저는 border: 1px solid red 라는 코드로 인식하여 스타일링이 되는 것 이다.

• switch와 map을 통한 refactoring

import "./App.css";
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", "blue", "green", "black"];

const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "빨간 박스";
    case "blue":
      return "파란 박스";
    case "green":
      return "초록 박스";
    default:
      return "검정 박스";
  }
};
function App() {
  return (
    <StContainer>
      {boxList.map((box, idx) => (
        <StBox key={idx} $borderColor={box}>
          {getBoxName(box)}
        </StBox>
      ))}
    </StContainer>
  );
}

export default App;

Global Style

(1) Global Style (전역 스타일) 이란?

우리는 프로젝트에 공통적으로 적용해야 할 스타일이 있을 수 있다.
그럴 때 적용하는 방법이 바로 전역 스타일링 이다.

(2) 컴포넌트 단위 스타일링

// TestPage.jsx
import styled from "styled-components";

function TestPage(props) {
  return (
    <Wrapper>
      <Title>{props.title}</Title>
      <Contents>{props.contents}</Contents>
    </Wrapper>
  );
}

const Title = styled.h1`
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  font-size: 1.5rem;
  margin: 0;
  margin-bottom: 8px;
`;

const Contents = styled.p`
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
  line-height: 1.5;
  font-size: 1rem;
`;

const Wrapper = styled.div`
  border: 1px solid black;
  border-radius: 8px;
  padding: 20px;
  margin: 16px auto;
  max-width: 400px;
`;

export default TestPage;

모든 컴포넌트에 font-family와 line-height속성이 공통적으로 들어있다.
이때 공통적으로 적용되는 부분은 빼서 global style로 적용할 필요가 있다.

(3) Global Style 적용

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

글로벌 스타일 컴포넌트를 루트 최상위에 넣어주면 하위의 컴포넌트들에게 글로벌 스타일이 적용된다.

느낀점

어려운 것이 아니라 익숙하지 않은 것이다!😤
계속 사용해보면서 익숙해질 필요가 있다.