React 컴포넌트 CSS

CSS 적용

그렇다. 리액트에 CSS 적용은 앞 글에서 JSX를 설명하면서 언급을 하였는데 그게 끝이 아니다. 만만치 않은 놈이다.
다시 코드를 가져와 보자.

(App.js)
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
		헬로 월드!
    </div>
  );
}

export default App;

(App.css)
.App{
	font-size: 100px;
    color: red;
}

헬로 월드가 아니고 헬 월드 같다. 여기까지가 앞 글에서 설명했던 컴포넌트에 스타일을 적용하는 방법이다. 하지만 문제가 있으니 귀찮아도 예시를 만들어 봐야겠다.

CSS 적용 시 주의점

컴포넌트를 하나 일단 만든다.

(Hello.js)
import './Hello.css';

function Hello() {
  return (
  <div className="title">안녕, 리액트!</div>
  )
}
export default Hello;

CSS도 만들어야겠쥬?

(Hello.css)
.title{
	font-size: 100px;
    color: red;
}

또 다른 컴포넌트 하나를 만들어보고

(Bye.js)
function Bye() {
  return ( 
  <div className="title">으악, 리엑트!</div>
  )
}

export default Bye;

Bye 컴포넌트에는 CSS를 적용하지 않고, className='title'만 준다.
마지막으로, App 컴포넌트에 다 넣어보자

(App.js)
import React from 'react';
import Bye from './Bye';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
      <Bye />
    </div>
  );
}

export default App;

그 결과는...

역시 이럴 줄 알았다.
수많은 파일을 그냥 보내는 것 보다 압축 해서 전송하는 게 훨씬 빠르기 때문이라고 한다. 컴포넌트 단위로 나뉜 수많은 파일을 하나씩 요청하는 것보단 하나로 합친 파일을 요청하는 게 자원도 덜 들고, 속도도 빠르므로 리액트의 모든 파일은 하나의 파일로 합쳐지게 된다고 한다.

즉, 이렇게 리액트의 모든 파일을 하나로 압축하는 과정에서 Hello 컴포넌트와 Bye 컴포넌트의 클래스 이름이 똑같다고 처리하기 때문에, Bye 컴포넌트에서 CSS를 불러오지 않아도 Hello 컴포넌트에서 불러온 CSS의 속성이 적용되는 것이다.

이러한 문제는 해결하기 위해 나온 CSS Module 이라는 기술이 있다고 한다.

바로 기존 파일의 이름에 module이라는 단어만 넣어주면 끝!
위에서 사용한 코드를 예로 들어보면 Hello.css를 Hello.module.css로 수정만 하면 Bye컴포넌트에 스타일이 안먹힌다는 것이다.

결과

으악,리액트는 도망갔다, 다들 열심히 리액트 공부하자.