[React] 리액트 전에 알아야 할 JSX 기본 문법

React의 JSX 기본 문법을 정리해보았습니다.  (코딩애플님의 강의를 참조했습니다💕)

 

app.js

import "./App.css";

function App() {
  return (
    <div className="App">
    	<h3 className="greeting">Hello, World!</h3>
    </div>
  );
}

위의 코드는 html 처럼 보이지만 사실 html이 아닙니다 !! 자바스크립트 안에서 html 대용으로 쓰기 위한 JSX인데요, 대표적인 문법이 3가지라고 합니다.

 

1. classname

html에서는 <div class="app"></div> 이렇게 썼던 것이 JSX에서는 className으로 쓰입니다.

그 이유는 이것이 js 파일이기 때문인데요, 자바스크립트에서는 class는 객체를 생성하기 위한 키워드로 예약되어 있죠! 그래서 Class를 대신해 ClassName으로 쓰고 있습니다. CSS에서도 class와 동일하게 사용할 수 있습니다.

 

app.css

.greeting{
    color: red;
}

참고로, css 파일을 추가하려면 다음과 같이 import 해주시면 됩니다.

import "./App.css";

 

2. 데이터 바인딩

import "./App.css";

function App() {
  let name = 'greeting';
  let text = 'Hello, World!';
  return (
    <div className="App">
    	<h3 className={name}>{text}</h3>
    </div>
  );
}

{} 괄호를 이용해 변수의 값을 html에 바로 넣을 수 있습니다.

 

3. html에서 직접 CSS 지정

import "./App.css";

function App() {
  let name = 'greeting';
  let text = 'Hello, World!';
  return (
    <div className="App">
    	<h3 className={name} style={{color:'red', fontSize:'15px'}}>{text}</h3>
    </div>
  );
}

CSS를 바로 넣어주려면 style={{}} object 형식으로 넣으면 되고, font-size가 아닌 fontSize로 넣어야 합니다!

 

이제 리액트로 들어갈 준비가 끝났습니다!!⭐