JSX

JSX란?

• JSX는 자바스크립트의 확장 문법이다.
• React에서 UI를 빌드하기 위해 사용한다.
• JSX는 HTML과 매우 유사하지만, 자바스크립트의 기능을 모두 활용할 수 있다.

JSX의 문법

1. 부모 요소는 하나만 감싸는 형태여야 한다.

// 에러 코드
function App() {
	return (
		<div>Hello</div>
		<div>World!</div>
	);
}

// 정상 코드
function App() {
	return (
		<>
			<div>Hello</div>
			<div>World!</div>
		</>
	);
}

2. 자바스크립트 표현식

function App() {
	const name = 'yeah';
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div> // yeah
		</div>
	);
}

render

• 컴포넌트가 화면에 렌더링될 때 호출되는 메소드이다.
• JSX 코드를 반환하거나, React 요소나 React Fragment를 반환한다.
• 컴포넌트의 상태(state)나 속성(props)이 변경될 때마다 호출되며, 변경된 상태를 적용하여 다시 렌더링합니다.
• 변경된 부분만을 실제 DOM에 반영함으로써, React는 필요한 최소한의 DOM 조작만을 수행하여 성능을 최적화할 수 있다.

import { createRoot } from "react-dom/client";
import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <div>
    <App />
  </div>
);

함수 컴포넌트

• React에서 함수 컴포넌트는 class
  로 정의된 컴포넌트와 다른 형태의 컴포넌트이다.
• 함수 컴포넌트는 함수 형태로 작성되며, 일반적으로 UI를 렌더링하기 위해 JSX를 반환한다.

// MyFunctionComponent.js

import React from 'react';

function MyFunctionComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

export default MyFunctionComponent;

// App.js
import React from 'react';
import MyFunctionComponent from './MyFunctionComponent';

function App() {
  return (
    <div>
      <MyFunctionComponent name="Alice" /> 
      <MyFunctionComponent name="Bob" />
    </div>
  );
}
export default App;

위 코드에서 MyFunctionComponent 함수는 props 객체를 매개변수로 받아서, 이를 사용하여 JSX를 반환했다. MyFunctionComponent를 App 컴포넌트 내부에서 사용하고 있다.

화면에는 Hello, Alice! , Hello, Bob! 과 같이 나타난다.

---