가독성

styled component를 사용하지 않고 인라인에 css를 작성하게되면 코드의 가독성이 떨어진다.(Tailwind의 경우 인라인에 직접 작성하는 방식이라서 코드의 가독성이 좋지 않다고 느껴진다)
아래의 예는 단순히 한개의 css만 적용한거지만, 만약 하나의 div에 여러개의 css를 적용해야 한다면 문제가 생길것이다.

const divStyle = {
  color: "blue",
  backgroundImage: "url(" + imgUrl + ")"
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

자유로운 css 컴포넌트 생성

단순히 파일을 하나 생성해서 그곳에 사용할 스타일을 지정해 두고 단순히 꺼내서 쓰기만 하면 된다

// style.js
export const LoginContainer = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fefefe;
  width: 749px;
  height: 685px;
  margin: 0 auto;
  border: 1px solid #8b7d76;

`

// style.jsx
import {LoginSocialContainer,} from './style'

<LoginContainer>
        <h1>로그인</h1>
        <form>
          <LoginInput
            type="text"
            placeholder="아이디를 입력하세요."
            name="id"
            value={id}
            onChange={(e) => setId(e.target.value)}
          />
          <LoginInput
            type="password"
            placeholder="비밀번호를 입력하세요"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
          <LoginBtn onClick={(e) => onClickLoginHandler(e)}>
            로그인 하기
          </LoginBtn>
        </form>
        <LoginSocialContainer>
          <img
            src={kakao}
            alt="카카오 로그인"
            onClick={() => {
              onKakaoLoginHandler()
            }}
          />
        </LoginSocialContainer>
   </LoginContainer>

다른 라이브러리에 비해 쉬운 난이도

SCSS 나 Tailwind는 사용하려면 어느정도 배우는 기간이 필요하다. 하지만 styled 컴포넌트는 그저 css 지식만 있다면 javascript에서 변수를 지정하는 방식처럼 선언하고 그걸 태그 대신에 사용하면 된다.

전처리를 할 필요가 없다.

SCSS를 사용하기 위해선 반드시 전처리 과정이 필요하다. 즉 SCSS로 작성된 것을 css로 다시 컴파일 하는데에 시간이 걸릴 수 있다.

CSS-in-Js

CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 대표적으로는 styled-components, emotion 등의 라이브러리가 있으며, 이것을 import하여 활용한다.

기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있는 추세다. 특히 이러한 부분 때문에 CSS-in-JS가 더욱 각광받고 있다.

CSS-in-Js의 장점

• CSS-in-JS는 Javascript 환경을 최대한 활용 할 수 있다.

• JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다. 예를 들어, React에서는 props를 활용한 조건부 스타일링이 가능하다.

• 현재 사용중인 스타일만 DOM에 포함한다.

• CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다.