첫 번째 리액트 앱 만들기 "Hello, World!"

 이제 실제로 간단한 리액트 애플리케이션을 만들어보면서 리액트의 기본 구조와 작동 방식을 이해해 봅시다.

 우리는 전통적인 프로그래밍 입문 예제인 "Hello, World!"를 리액트로 구현할 것입니다.

1. 프로젝트 생성

 먼저, Create React App을 사용하여 새 프로젝트를 생성합니다.

npx create-react-app hello-react
cd hello-react

2. 프로젝트 구조 살펴보기

 프로젝트가 생성되면 다음과 같은 구조를 가집니다.

hello-react/
  ├── node_modules/
  ├── public/
  │   ├── favicon.ico
  │   ├── index.html
  │   └── manifest.json
  ├── src/
  │   ├── App.css
  │   ├── App.js
  │   ├── App.test.js
  │   ├── index.css
  │   ├── index.js
  │   ├── logo.svg
  │   └── serviceWorker.js
  ├── package.json
  └── README.md

 주요 파일의 역할

• public/index.html : 애플리케이션의 HTML 템플릿
• src/index.js : JavaScript 시작점
• src/App.js : 메인 리액트 컴포넌트
• package.json : 프로젝트 설정 및 의존성 정보

3. App.js 수정하기

 src/App.js 파일을 열고 다음과 같이 수정합니다.

import React from 'react';
 
function App() {
  return (
    <div className="App">
      <h1>Hello, World!</h1>
    </div>
  );
}
 
export default App;

 이 코드의 의미

• import React from 'react'; : React 라이브러리를 불러옵니다.
• function App() { ... } : 함수형 컴포넌트를 정의합니다.
• return ( ... ); : JSX를 사용하여 컴포넌트의 UI를 정의합니다.
• export default App; : 이 컴포넌트를 다른 파일에서 불러올 수 있게 내보냅니다.

4. index.js 이해하기

 src/index.js 파일을 살펴봅시다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
 
reportWebVitals();

 이 파일의 역할

• React와 ReactDOM을 불러옵니다.
• App 컴포넌트를 불러옵니다.
• ReactDOM.createRoot()를 사용하여 React의 루트를 생성합니다.
• root.render()를 호출하여 App 컴포넌트를 렌더링합니다.

5. 애플리케이션 실행하기

 터미널에서 다음 명령어를 실행합니다.

npm start

 브라우저가 자동으로 열리고 http://localhost:3000에서 "Hello, World!"가 표시되는 것을 확인할 수 있습니다.

6. 컴포넌트 추가하기

 이제 새로운 컴포넌트를 만들어 App 컴포넌트에 추가해 봅시다. src 폴더에 Greeting.js 파일을 생성하고 다음 내용을 입력합니다.

import React from 'react';
 
function Greeting(props) {
  return <p>Welcome to React, {props.name}!</p>;
}
 
export default Greeting;

 이제 App.js를 수정하여 Greeting 컴포넌트를 사용해 봅시다.

import React from 'react';
import Greeting from './Greeting';
 
function App() {
  return (
    <div className="App">
      <h1>Hello, World!</h1>
      <Greeting name="Developer" />
    </div>
  );
}
 
export default App;

 이 변경 사항을 저장하면 브라우저에서 자동으로 업데이트된 내용을 확인할 수 있습니다.

7. Props 이해하기

 위 예제에서 name="Developer"는 props(속성)입니다. 이를 통해 부모 컴포넌트(App)에서 자식 컴포넌트(Greeting)로 데이터를 전달할 수 있습니다.

8. 상태 추가하기

 이제 간단한 상태를 추가해 봅시다. App.js를 다음과 같이 수정합니다.

import React, { useState } from 'react';
import Greeting from './Greeting';
 
function App() {
  const [count, setCount] = useState(0);
 
  return (
    <div className="App">
      <h1>Hello, World!</h1>
      <Greeting name="Developer" />
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
export default App;

 이 예제에서

• useState 훅을 사용하여 상태를 추가했습니다.
• 버튼 클릭 시 setCount 함수를 호출하여 상태를 업데이트합니다.
• 상태가 변경될 때마다 컴포넌트가 다시 렌더링되어 화면이 업데이트됩니다.

정리

 이렇게 해서 우리는 첫 번째 리액트 앱을 만들어 보았습니다.

 이 과정에서 우리는 이러한 내용을 배웠습니다.

1. Create React App을 사용하여 프로젝트를 설정했습니다.
2. 프로젝트 구조와 주요 파일의 역할을 이해했습니다.
3. 컴포넌트를 생성하고 수정하는 방법을 배웠습니다.
4. JSX를 사용하여 UI를 정의하는 방법을 알아보았습니다.
5. Props를 통해 컴포넌트 간 데이터를 전달하는 방법을 배웠습니다.
6. useState 훅을 사용하여 상태를 관리하는 방법을 익혔습니다.

 이 간단한 예제를 통해 리액트의 기본적인 개념과 작동 방식을 이해할 수 있습니다.

 리액트의 강력한 기능은 이러한 기본 개념들을 바탕으로 구축되며, 이를 조합하여 복잡하고 동적인 사용자 인터페이스를 만들 수 있습니다.

 다음 장에서는 이러한 개념들을 더 깊이 있게 탐구하고, 더 복잡한 애플리케이션을 구축하는 방법을 학습하게 될 것입니다.