[React]styled-components 쓰면 CSS파일 없어도 되..죠?

컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생기는데

 

1. class 만들어놓은걸 까먹고 중복해서 또 만들거나

2. 갑자기 다른 이상한 컴포넌트에 원하지않는 스타일이 적용되거나

3. CSS 파일이 너무 길어져서 수정이 어렵거나

 

이런 경우가 있습니다.

 

그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는데

styled-components 라는 인기 라이브러리를 설치하여 이용하시면 됩니다.

 

 

 

 

 

일단 설치부터 해봅시다

 

터미널 열어서 npm install styled-components 해주면 됩니다.

 

그리고 사용하고 싶은 컴포넌트 맨위에 이런걸 import 해와야합니다.

Detail.js 파일 위에 ▲ 위처럼 입력해서 import 하시면 셋팅 끝 

 

 

 

 

 

styled-components 기본적인 사용법 

 

이 라이브러리를 이용하면 컴포넌트를 만들 때 스타일을 미리 주입해서 만들 수 있습니다.

제가 한번 예시로 padding : 20px인 div박스를 styled-components를 이용해 만들어보겠습니다.

 

 

1. <div>를 하나 만들고 싶으면 저렇게 styled.div 라는걸 사용하면 됩니다.

<p> 만들려면 styled.p 이런 식임 

2. 오른쪽에 `` backtick 기호를 이용해서 CSS 스타일을 넣을 수 있습니다. 

3. 그럼 그 자리에 컴포넌트를 남겨주는데 변수에 저장해서 쓰면 됩니다. 

 

 

 

 

장점1. CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일넣을 수 있습니다.

장점2. 여기 적은 스타일이 다른 JS 파일로 오염되지 않습니다. 원래 그냥 CSS파일은 오염됩니다.

장점3. 페이지 로딩시간 단축됩니다.

 

왜냐면 저기 적은 스타일은 html 페이지의 <style>태그에 넣어줘서 그렇습니다. 

 

 

 

 

 

 

 

 

 

 

<출처 : 코딩애플 : React 리액트 기초부터 쇼핑몰 프로젝트까지!>