CSS-in-JS

CSS-in-JS는 css나 scss를 사용하지 않고 JS로 작성한 컴포넌트에 바로 삽입하는 스타일 기법을 뜻합니다.

CSS-in-JS의 장점

• Local Scoping
• Encapsulation
• Portability
• Reusability
• Dynamic Functionality

CSS-in-JS의 단점

• Learning Curve
• Extra Layer of Complexity
• Code Readability

React에서 컴포넌트 스타일링을 하는 세 가지 방법은 다음과 같습니다.

• 외부 css 파일작성해서 className으로 속성 전달하기
• inline CSS
• CSS-in-JS

외부 css파일 작성 및 className 사용은 가장 기본적인 방법입니다.
inline의 경우는 지속성과 확장성이 떨어지므로 React에서 권장하지 않는다고 합니다.

라는게 구글링을 통해 알아본 결과였습니다.

제가 직접 2주간 사용해본 결과 프론트엔드 뉴비의 입장에서 CSS-in-JS의 가장 큰 장점은,
컴포넌트 자체를 커스텀 하는 느낌이라 컴포넌트 변수명을 잘 지으면 직관적으로 어떤 코드인지 이해하기가 쉽습니다. --> 그냥 직관적이고, 가독성이 좋다는 것입니다.

<div style={{backgroundColor:"orange" ~~~ }}></div>

이런 인라인 스타일과, className의 경우엔 남발된 div태그가 어떤 역할인지 이해하려면 style을 직접 읽어야 하는데, Styled Components로 생성한 컴포넌트의 경우엔

const Box = styled.div`
  background-color: ${props => props.tomato ? 'tomato':'teal'};
  width: 100px;
  height: 100px;
`;

<Box />
<Box tomato />

위와 같이 그냥 컴포넌트 변수명 자체로 직관적으로 다가오는 경우가 많아서 스타일을 굳이 읽지 않아도 어떤 역할을 하는지 이해하기 쉬웠던 것 같습니다.

Reference

• An Introduction to CSS-in-JS: Examples, Pros, and Cons