[React] JSX 사용전 유의사항

주의사항 1. 하나의 태그만 반환해야한다

App.js

import './App.css';

function App() {
  return <h1>Hello!</h1>;
}

export default App;

예를 들어서 위와같이 하나의 태그로만 이루어진걸 반환하는건 문제가 없다.

 

다만

 

App.js

import './App.css';

function App() {
  return <h1>Hello!</h1>;
  <h2>hello!</h2>;
}

export default App;

위와같이 두개 이상의 태그를 반환하는것은 불가능하다 이런 경우에는

 

App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <h1>Hello!</h1>
      <h2>Hello!</h2>
    </div>
  );
}

export default App;

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <>
      <h1>Hello!</h1>
      <h2>Hello!</h2>
    </>
  );
}

export default App;

위와 같은 모습으로 <div> </div> 혹은 <> </>로 묶어줘야한다.

 

<div> </div>는 부모인자가 있어야할 때

 

<> </> 는 부모인자 없이 다수의 태그를 사용할 때 사용한다.

 

React 내부적으로는 <Fragment></Fragment>를 사용한다

 

 

 

주의사항 2. React 에서는 className을 사용한다

 

Html에서 사용하는 class 와 동일하게 사용한다.

 

 

 

주의사항 3. 변수를 가져올때는(값을 다룰때) 항상 중괄호를 사용해야한다.

app.js

import logo from './logo.svg';
import './App.css';

function App() {
  const name = '재훈';
  return (
    <>
      <h1 className='orange'>Hello!</h1>
      <h2>Hello!</h2>
      <p>{name}</p>
      <ul>
        <li>우유</li>
        <li>딸기</li>
        <li>바나나</li>
      </ul>
      <img src='' alt=''></img>
    </>
  );
}

export default App;