[React] 리액트 JSX 기초문법 3가지

리액트는 JSX를 사용한다. JSX란 JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 문법이다. JSX를 사용하면 자바스크립트에서 HTML문법을 사용할 수 있게 된다.

 

1️⃣ class 넣을 땐 className으로

import './App.css';

function App() {
  return (
    <div className="App">
    	<h4>hello world</h4>
    </div>
  );
}

export default App;

 

2️⃣ 변수를 넣을 때는 중괄호

import './App.css';

function App() {

  let data = 'hello world';

  return (
    <div className="App">
      <div>{data}</div>
    </div>
  );
}

export default App;

 

3️⃣ style 넣을 땐 style={{스타일명:'값'}}

import './App.css';

function App() {
  return (
    <div className="App">
    	<h4 style={ {color: 'red', fontSize: '16px'} }>hello world</h4>
    </div>
  );
}

export default App;

 

참고로 return() 안에는 하나의 태그만 가능하다. 아래와 같이 병렬로 태그를 작성하게 되면 에러가 발생!!

import './App.css';

function App() {
  return (
    <div className="App">
        <h4 style={ {color: 'red', fontSize: '16px'} }>hello world</h4>
    </div>
    <div className="App">
        <h4 style={ {color: 'red', fontSize: '16px'} }>hello world</h4>
    </div>
  );
}

export default App;

 

---

📌 Reference

코딩애플강의 - React 리액트 기초부터 쇼핑몰 프로젝트까지! (https://codingapple.com/course/react-basic/)