React 스타일 지정 방법

React 에는 기본적으로 스타일을 작성하는 방법이 크게 2가지고 존재합니다.

1. Inline Style CSS

인라인 방식의 CSS 는 클래스 또는 컴포넌트형 함수들 에서 Object 를 만들어서 직접 태그에 넣는 방식의 스타일 방식입니다.

1. Example

render() {
  const tempStyle={
    display: "none"
  }
  
  return (
    <div>
    	<div style= { tempStyle }></div>
    </div>
  );
}

2. Example

render() {
	return (
      <div>
      	<div style= {{ display: "none" }}></div>
      </div>
    );
}

위의 Example 1번과 2번은 같은 기능이며 구분하기 쉽게 변수에 담아서 넣는 방식이 더 효과적이고 좋은 것 같습니다.

2. Import Style CSS

미리 작성해둔 CSS 를 불러와서 import 시켜 사용하는 방식입니다.

Example

CSS

.temp {
	display: none;
}

JS

{/* 같은 위치에 있는 temp.css 파일 불러오기 */}
import "./temp.css";

render() {
	return (
      <div>
      	<div className="temp"><div>
      </div>
    );
}