JSX 문법 작성 방법

import './App.css';

function App() {
  const name = 'autumn';
  const list = ['딸기', '바나나', '오렌지'];
  return (
    <>
      <h1 className='orange'>{`Hello! ${name}`}</h1>
      <h2>{name}</h2>
      <ul>
        {list.map((item) => (
          <li>{item}</li>
        ))}
      </ul>
      <div style={{ width: '200px', height: '200px' }}></div>
    </>
  );
}

export default App;

• 컴포넌트는 함수로 만들 수 있음
  • 함수 이름은 대문자로 시작해야 함
  • 리턴문에 JSX 를 사용해야 함
• 하나의 태그로 묶어서 반환해야 함 
  • Fragment 인 <></> 사용 가능
• class 대신 className 을 사용해야 함
• 자바스크립트 코드 사용 시 중괄호로 묶어 주어야 함