[React on Mac] 리액트 작업시 기억해두면 좋을 기초 지식 (1)

노마드코더의 리액트 강좌를 들으면서 기억해둘 기초 지식들을 하나씩 정리해둔다.

 

1. css파일을 그대로 사용하지 않음

예전에 인스타그램 사이트를 크롤링하면서 알게된 점은 특정 태그들의 class이름들이 무작위적으로 계속 바뀐다는 것이었다.

기존에 알던 html,css,javascript 지식으로는 이게 어떻게 가능하지 싶었고, 네이버 사이트만 봐도 태그들의 class 이름이 괴상하게 되어있었는데 리액트 강좌를 들으면서 이 방법을 사용하는구나 싶었다.

리액트에서는 css 파일형식을 그대로 사용하지 않을 수 있다. 웹 서비스 제작을 하다보면 클래스 이름이 중복되는 상황들이 종종 발생해서 곤란한 경우다 다반사였는데, 리액트에서는 이러한 상황을 피할 수 있게 구성되어있다. 방법은 다음과 같다.

1. App.css 파일이라면 App.module.css로 파일 형식 변경
2. 기존의 App.js 파일이 다음과 같은 코드였다면

import btn from "./App.css";

function App() {
	return (
    	<div>
        	<h1 className="btn">Welcome back!!</h1>
        </div>
        );
    }
    
export default App

이 코드를 다음과 같이 바꿀 수 있다. 

import styles from "./App.module.css";

function App() {
	return (
    	<div>
        	<h1 className={styles.btn}>Welcome back!!</h1>
        </div>
        );
    }
    
export default App

이렇게 하면 각각의 js 파일의 컴포넌트 속 element 들의 className이 중복되어도 react 앱이 클래스 이름을 랜덤으로 모듈화 바꿔주므로 중복문제가 발생하지 않게 된다.

개발자 도구에서 확인된 App.module.css가 적용된 h1 태그

3. 즉 정리하면,

• 컴포넌트를 분리해서 만들 수 있고
• 해당 컴포넌트를 위한 CSS를 만들 수 있고
• 그 CSS는 독립적인 형태가 될 수 있다(리액트의 장점)