styled-components로 조건부 스타일링

0. CSS-in-Js

CSS-in-JS는 React 등의 자바스크립트 기반 라이브러리나 프레임워크에서 CSS를 작성하고 관리하는 방식을 말한다. 기존의 방식으로는 HTML 파일에 직접 style 태그를 사용하거나, CSS 파일을 작성하여 링크하는 방식. 그러나 CSS-in-JS는 이러한 방식이 아닌, 자바스크립트 코드 내부에 CSS를 작성하고 적용하는 방식.

CSS-in-JS를 사용하면 스타일을 컴포넌트 단위로 작성할 수 있으며, 이로 인해 컴포넌트 간의 스타일 충돌을 방지하고 유지보수성과 재사용성을 향상시킬 수 있음. 또한, 자바스크립트 코드로 스타일을 작성하기 때문에 동적인 스타일링이 가능하고, 컴포넌트의 상태에 따라 스타일을 변경할 수 있.

대표적인 CSS-in-JS 라이브러리로는 Styled Components, Emotion, CSS Modules, JSS 등이 있다. 이 중에서도 Styled Components로 스타일링을 해보겠다.

1. Styled-Components

yarn을 이용해서 styled componenet를 사용해보자!

yarn add styled-components

위의 명령어를 통해 내 프로젝트 파일에 styled-component 패키지 추가하고 import styled from styled-components 해주면 사용 할 수 있음.

const StContainer = styled.div`
  display: flex;
`;

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 3px solid ${(props) => props.borderColor};
`;

const colorList = ["red", "blue", "yellow"];
const getBoxName = (color) => {
  switch (color) {
    case "red":
      return "red box";
    case "blue":
      return "blue box";
    case "yellow":
      return "yellow box";
    default:
      return "black box";
  }
};

function App() {
  return (
    <StContainer>
      {colorList.map((color) => (
        <StBox borderColor={color}>{getBoxName(color)}</StBox>
      ))}
    </StContainer>
  );
}

styled.html태그 형식으로 사용할 수 있고 map과 swtich문을 사용해서 조건에 따라 다르게 스타일링 할 수 있음!

2. 전역 스타일링

1번에서 진행한 스타일링은 특정 component에 국한해서 한 것이다. 하지만 프로젝트 내에서 공통적으로 사용할 스타일링(예를 들면 폰트, 특정 버튼들)이라면 전역 스타일링으로 작성해주는 것이 더 효율적이다.

// GlobalStyle.jsx
import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
  body {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5;
  }
`;

export default GlobalStyle;

이렇게 body 안에 스타일링을 적용한 GlobalStyle 컴포넌트를 만들어서 export해주고

// App.js
import GlobalStyle from "./GlobalStyle";
import BlogPost from "./BlogPost";

function App() {
	const title = '전역 스타일링 제목입니다.';
	const contents = '전역 스타일링 내용입니다.';
  return (
    <>
      <GlobalStyle />
      <BlogPost title={title} contents={contents} />
    </>
  );
}

export default App;

App.js에서 가장 상위에 GlobalStyle을 작성해주면 하위 요소들에 전역 스타일링이 적용된다!