[React]리액트 학습 기록 - JSX 사용법

👀 JSX가 무엇일까?

• JSX는 리액트에서 사용된다.
• JSX를 사용하면 html 구문을 JS에서 사용할 수 있기 때문에 간결하고, 편리하게 개발이 가능하다.

---

일반 JS의 명령형 접근 방식

function App() {
	const para = document.createElement('p');
 	para.textContent = 'This is also visible';
  	document.getElementById('root').append(para);
}

---

JSX 사용 예시

function App(){
	return (
    	<div>
      		<h2>Let's get started!</h2>
      		<p>This is also visible!</p>
      	</div>
    );
}
export default App;

• export로 해당 함수를 내보내줘야 한다.

• 위와 같은 함수는 index.js에서 아래와 같이 사용할 수 있다.

---

import 해서 사용하기

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• 다른 컴포넌트의 함수를 사용하고 싶다면 해당 컴포넌트를 import 해줘야 한다.

• 한 컴포넌트당 하나의 파일을 갖도록 한다.
  -> 리액트 프로젝트에서 수십, 수백의 파일을 갖게 된다는 것이다.

---

과거 react 사용법

jsx 사용하지 않음

import React from 'react';		// 반드시 react를 임포트해줘야 한다.

function App(){

  return React.createElement(
      'div',
    {},
    React.createElement('h2', {}, "Let's get started!"),
    React.createElement(Expenses, {items: expenses})
  );
}

jsx 사용

function (){
  return (
      <div>
          <h2>Let's get started!</h2>
          <Expenses items={expenses}/>
      </div>
  );
}