React - css 파일 없이 사용하는 방법

Styled-components

• css 파일 없이 style을 적용시키는 방법이다.

 

How to use styled-components

• 우선 import가 필요하다.
• import styled from 'styled-components'

예시1) styled 선언

• 다음의 구조와 같이 styled-components를 선언한다. styled 컴포넌트는 해당 컴포넌트에만 적용이 가능한 특징을 가지고 있다. 따라서 해당 컴포넌트의 모든 div태그는 배경색은 빨간색, 패딩값은 20px, 글자색은 하얀색으로 적용이 된다.

예시2) styled-components 사용

• styled 속성을 작성을 완료하였으면 변수에 담아 이러한 구조로 사용한다. styled-components는 컴포넌트이기 때문에 반드시 앞에 대문자를 사용해야한다. *대문자를 사용하지 않으면 인식이 안되는 경험을 했다ㅠㅠ

예시3) styled-components 응용

• 예시1에서 간단한 선언 뿐만 아니라 예시3 코드와 같이 props를 활용해 색을 변환시키는 것 또한 가능하다.

 

Styled-components 장단점

• css파일은 클래스명이 동일하거나 태그를 이용하여 작성한 경우 다른 js파일에도 적용이 되지만 styled-components는 다른 js파일로 오염이 되지 않는 장점이 있다. *파일명.module.css를 통해서 오염을 막을 수 있긴 하다.
• loading 시간이 단축(향상)되는 장점을 가지고 있다!
• props를 활용한 컴포넌트 재활용이 가능하다.
• 하지만 css파일을 만들어 따로 선언하는 방식이 아니기 때문에 html 구조가 매우 복잡해지는 단점을 가지고 있다.
• 따라서 사용자의 취향?에 따라서 사용하면 되는 것이다.
• 나는 css파일을 만들어 사용하겠다...