React를 사용한 기본적인 코드를 아래에 제시해 드리겠습니다. React는 JavaScript 라이브러리로, 웹 애플리케이션 개발을 위해 사용됩니다. 아래 예제는 React 컴포넌트를 작성하는 간단한 방법을 보여줍니다.
- React 앱을 만들려면 먼저 React 및 ReactDOM 라이브러리를 프로젝트에 추가해야 합니다. 일반적으로 Create React App과 같은 도구를 사용하거나 직접 설정할 수 있습니다.
- React 컴포넌트 작성:
// React 및 ReactDOM 라이브러리를 불러옵니다.
import React from 'react';
import ReactDOM from 'react-dom';
// 간단한 함수형 컴포넌트를 정의합니다.
function App() {
return (
<div>
<h1>Hello, React!</h1>
<p>This is a basic React app.</p>
</div>
);
}
// ReactDOM을 사용하여 컴포넌트를 화면에 렌더링합니다.
ReactDOM.render(<App />, document.getElementById('root'));- HTML 파일에 컴포넌트 렌더링 영역 추가:
<!DOCTYPE html>
<html>
<head>
<title>React App</title>
</head>
<body>
<!-- 컴포넌트를 렌더링할 DOM 요소를 지정합니다. -->
<div id="root"></div>
</body>
</html>이 예제에서는 간단한 React 컴포넌트를 작성하고 ReactDOM을 사용하여 해당 컴포넌트를 HTML 문서의 특정 요소에 렌더링하는 방법을 보여줍니다. 이것은 React 애플리케이션의 기본 구조 중 하나일 뿐이며, 실제 프로젝트에서는 더 복잡한 컴포넌트와 상태 관리가 필요할 것입니다. React의 개념을 익히고, 컴포넌트와 상태를 더 자세히 다루는 것이 좋습니다.