React의 CSS 관리방법 : styled-components

styled-components 는 CSS를 JavaScript 파일 안에서 직접 작성할 수 있게 해주는 도구 입니다.

CSS-in-JS 라고 불리며 컴포넌트 마다 스타일을 독립적으로 관리할 수 있어 리액트 프로젝트에서 많이 사용합니다.

 

설치 방법

npm	npm i styled-components
yarn	yarn add styled-components

 

styled-components를 사용하는 이유

1. 컴포넌트와 스타일을 한 곳에서 관리할 수 있습니다. 별도로 CSS 파일을 만들 필요가 없습니다.
2. CSS 클래스 충돌을 방지 합니다. 각 스타일은 컴포넌트에 고유하게 적용되기 때문에 다른 곳에서 사용 중인 클래스 이름과 겹칠 일이 없습니다.
3. 동적 스타일링이 쉬워진다. 컴포넌트에 전달되는 props 에 따라 스타일을 쉽게 바꿀 수 있다.

 

사용 예시

 

 

 

styled-components 의 장점

• 컴포넌트단위로 스타일을 관리 : 각 컴포넌트가 고유한 스타일을가집니다.
• CSS 클래스 충돌이 없음 : 클래스 이름이 자동으로 생성되서 다른 곳에서 같은 이름을 사용할 걱정이 없다.
• 동적 스타일링 : props를 활용해서 컴포넌트의 상태나 조건에 따라 스타일을 쉽게 바꿀 수 있다.

 

styled-components를 사용하면 좋을때 

• CSS 파일을 따로 관리하지 않고 컴포넌트와 스타일을 한 곳에서 관리하고 싶을 때
• 스타일의 유지보수를 쉽게 하고 싶을 때
• 프로젝트 규모가 커지면서 CSS 클래스 충돌을 피하고 싶을 때