코딩앙마 React JS 초보 강좌 총정리

리액트 설치하기
수동으로 프로젝트를 만드려면 상당한 노력이 필요하지만 create-react-app을 사용하면
누구나 쉽고 빠르게 구현할 수 있다.

create-react로 만든 프로젝트라면 별도의 패키지 설치 없이 css를 바로 사용할 수 있는 방법 세가지가 있다.

1. 인라인 스타일

import World from "./World";

export default function Hello() {
  return (
    <div>
      <h1 style = {		//인라인 스타일로 들어가는 css는 객체 형태로 들어간다.
    {color: 'red',
     backgroudColor: 'gray',	//value는 반드시 카멜케이스로 작성해줘야 한다.
     marginBottom: '30px',	//px같은 경우도 문자열이기 때문에 따옴표로 감싸줘야 한다.
     opcity: 0.5,	//숫자의 경우 그대로 써주면 된다.
    	}
	}>Hello</h1>
      <World />
    </div>
  );
}

인라인 스타일로 CSS를 작성하는건 특별한 이유가 없으면 거의 사용하지 않는다.

2. css파일로 작성하기

App.css에서 클래스이름으로 나누어 각 클래스마다 css를 작성하는 방법이다.
하지만 이 방법은 한개의 css파일에서 중복되는 클래스가 있으면,
한개 클래스가 바뀌면 다른 똑같은 이름의 클래스들도 모두 바뀌기 때문에 사용하기 힘들다.

3. module css로 작성하기
   : 각 컴포넌트 마다 (컴포넌트 이름).module.css를 만들어 이 css파일 내에
   스타일을 작성하고, 컴포넌트에 import styles from "module css파일 위치";
   로 임포트 사켜서 적용해준다.

임포트는 import (styles: 인수) from "module css파일 경로"; 로 작성!!
또한 스타일을 적용하는 태그에 className = {styles.box}로 적용해준다.

module.css파일에서 box클래스에 스타일을 적용시켜두었다.

위 방법으로 css를 적용하면, 위의 사진처럼 클래스 이름이 자동으로 module class 파일에 맞춰서 네이밍이 되기 때문에 css파일이 커질수록 골치인 (네이밍,상속,오버라이딩) 등을 간단하게 해결해줄 수 있고, 글로벌이 아닌 각 모듈에서 수정 보완이 가능하기 때문에 편리하다.

만들고자 하는 프로젝트의 css 파일의 크기가 크다면 세번째 방법을,
작다면 두번째 방법을 쓰는것이 좋다.(단, 클래스가 중복되지 않게)