React.js로 동적 웹페이지 만들기 💻

React.js는 웹 개발에서 인기 있는 JavaScript 프레임워크 중 하나입니다. 이를 사용하면 사용자 친화적이고 반응성이 뛰어난 웹 페이지를 쉽게 만들 수 있습니다. 오늘은 React.js를 사용하여 동적 웹페이지를 만드는 방법을 간단히 알아보겠습니다.

시작하기 전에

React를 시작하기 전에, Node.js가 설치되어 있어야 합니다. Node.js를 설치한 후, React 앱을 만들 준비가 되었습니다.

첫 React 앱 만들기

터미널을 열고 다음 명령어를 입력하여 새 React 앱을 만듭니다:

npx create-react-app my-dynamic-webpage

이 명령어는 my-dynamic-webpage라는 이름의 새 디렉토리를 만들고, 필요한 React 파일들을 그 안에 설치합니다.

앱 실행하기

앱 디렉토리로 이동한 후, 다음 명령어로 앱을 실행합니다:

cd my-dynamic-webpage
npm start

이제 브라우저에서 localhost:3000으로 이동하면, 새로 만든 React 앱을 볼 수 있습니다.

동적 컨텐츠 추가하기

React에서는 컴포넌트를 사용하여 UI를 구성합니다. 간단한 카운터 앱을 만들어 보겠습니다. src 폴더 안에 Counter.js 파일을 만들고 다음 코드를 추가합니다:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

export default Counter;

이 코드는 useState 훅을 사용하여 상태를 관리하는 간단한 카운터 컴포넌트를 만듭니다. 사용자가 버튼을 클릭하면 카운트가 증가하거나 감소합니다.

컴포넌트 사용하기

이제 App.js 파일을 열고, 기존 코드를 다음과 같이 수정하여 Counter 컴포넌트를 사용합니다:

import React from 'react';
import Counter from './Counter';

function App() {
  return (
    <div className="App">
      <h1>React.js로 동적 웹페이지 만들기</h1>
      <Counter />
    </div>
  );
}

export default App;

이제 앱을 다시 실행하면, 화면에 카운터가 표시되고 사용자가 버튼을 클릭하여 카운트를 변경할 수 있습니다.

마무리

React.js를 사용하여 동적 웹페이지를 만드는 기본적인 방법을 알아보았습니다. React는 컴포넌트 기반으로 동작하며, 상태 관리를 통해 웹 애플리케이션에 동적인 기능을 쉽게 추가할 수 있습니다. 이제 여러분도 React를 사용하여 다양한 프로젝트를 시작할 수 있습니다. Happy coding!