리액트에서 CSS를 사용하는 방법은 여러 가지가 있습니다.
그중에서 제가 이번에 설명드리고자 하는 것들은
1) 단순 인라인(inline) 스타일 적용 법
2) SASS 파일 스타일 적용법 (css-module 방식)
3) css-in-js 스타일 적용법적용 법 중에 하나인, 스타일 컴포넌트(styled-component) 적용 법
자 그러면 1번부터 차근차근 적어보겠습니다.
1) 단순 인라인(inline) 스타일 적용 법
인라인 스타일 적용 법이란, 무식하게 바로 태그가 선언된 그 자리에서 바로 스타일을 주는 겁니다. 때로는 간단하게 바로 먹일 수 있어서 쓰는 사람도 있어요 간단한 프로젝트에서는요. 그런데 하더라도 일부만 하지 전부다 하지는 않습니다. 한 번 수정사항이 생기면 일이이 다 수정해줘야 합니다.
<app.js 파일>
1-1) 인라인 스타일 적용법이란 위와 같이 바로 HTML 태그 속성 안에 바로 때려 넣는 것을 의미합니다.
흔히 가장 안 좋은 방법이다.라고 배웁니다. 심플하지만, 역시 어느 정도만 되는 프로젝트에도 저런 식으로 하게 되면 뭐 하나 수정할 때마다 일이이 전부 다 고쳐줘야 하므로, 힘듭니다.
1-2) 인라인 스타일 적용은 가장 높은 우선순위를 갖습니다.
이게 어떤 의미냐면, 다른 방법으로 같은 HTML 태그에 스타일을 줬지만, 이렇게 또 인라인 스타일을 주게 되면, 인라인 스타일이 최종적으로 적용되어서, 만약에 중복되는 스타일 속성이 있다면 이것으로 덮어 써집니다.
1-3) style = {{ }} 이렇게 중괄호를 두 번 해야 한다는 점을 유의해주세요.
또한 기존 스타일 속성 중에 border-style 이런 것처럼 중간에 "-" 대시가 들어가는 속성명이 있을 겁니다.
그런 속 성명 들은 리액트에서는 대시가 빠지고 대신 그다음 단어의 첫 글자를 대문자로 표기합니다. 위에서도 "borderStyle"로 되어있죠?
이것은 원래 리액트의 주된 표기방식은 카멜 표기법이기 때문입니다.
2) SASS 파일 스타일 적용 법( = css-module 방식 )
CSS파일을 따로 두고, 모아 두고 임포트 해서 스타일을 적용하는 방식입니다. 기존 html-js-css로만 사이트를 만들던 때랑 비슷하죠.
<customDiv.scss 파일>
<colors.scss 파일>
<App.js 파일>
2-1) 제일 먼저 sass 파일을 쓰기 위해선 관련 노드 모듈부터 설치해줘야 합니다.
npm i node-sass를 현재 react루트 폴더 안에서 ( package.json파일이 있는 곳 ) 실행하시면 됩니다.
참고로 npm i는 npm install의 약어입니다.
2-2) 위 사진을 참고하시면서 보시면, css파일이나 scss파일을 임포트하고 적용하고 싶은 컴포넌트의 클래스 네임이랑 scss파일에서 정의한 클래스 네임이랑 동일하게 맞춰주면 해당 CSS가 적용됩니다.
2-3) 다만 대부분 classNames라는 모듈을 설치하고 쓰시는데요. 클래스 네임 모듈을 쓰면, 일이이 사용자가 클래스 이름 명명을 하지 않고, 고민 없이 유니크한 클래스 이름을 얻을 수 있습니다. 편해서 쓰는 겁니다.
명령어로는 npm i classnames
3) 스타일 컴포넌트 적용 법
제가 자주 쓰는 방식입니다. 일터에서도 아마 따로 CSS팀이 없다면, 스타일 컴포넌트로 할 것 같습니다. 개발자들에게는 이게 훨씬 편하니깐요.
스타일을 주기 위해 따로. css파일이나,. scss파일이 없어도 됩니다.
스타일까지 javascript로 바로 먹이는 방식입니다.
그냥 리액트의 컴포넌트를 작성과 동시에, 스타일을 먹일 수 있는 방식입니다.
<App.js 파일 상단> (App.js에다 한꺼번에 썼는데, 길어서 상/하단으로 나눠서 찍었습니다.)
3-1) 먼저 styled-components 모듈 설치를 해야 합니다. 루트 폴더 안에서 다음 명령으로 설치합니다.
npm i styled-components
그리고 js파일에서 다음과 같이 모듈을 불러와서 사용합니다.
import styled from 'styled-components';
styled는 본인이 알아서 명명하면 되지만, 대체로 그냥 styled로 씁니다.
3-2) 컴포넌트를 변수 생성하듯이 const 키워드로 합니다. 주의하실 점은 컴포넌트 명명법을 지켜야 한다는 것입니다.
컴포넌트를 이름 지을 때는 무조건 대문자로 시작해야 합니다.
3-3) 스타일을 고정으로 줄 뿐만 아니라, props값을 통해 전달받은 값으로 유동적으로 스타일을 줄 수 있습니다.
위의 코드와 주석을 잘 살펴보세요.
<App.js 파일 하단>
3-4) 위에서 만든 컴포넌트는 바로 이렇게 App.js에서 사용할 수 있습니다.
첫 번째 Div에는 float에 left를 주었고. 두 번째 Div에는 아무것도 주지 않았으니 none으로 처리되겠네요.
이상 React에 CSS를 주는 방법을 대략적으로, 깔끔히 정리해봤습니다. 뭔가 부족한 점이 있다면 댓글로 남겨주세요.