React.js는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 이 라이브러리는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화하고, 컴포넌트 기반 아키텍처를 통해 코드의 재사용성과 유지보수성을 높일 수 있습니다. 이제 React.js를 사용하여 동적 웹 페이지를 구축하는 방법을 살펴보겠습니다.

1. React 프로젝트 설정

첫 번째로, React 프로젝트를 설정해야합니다. 이를 위해 Create React App을 사용할 수 있습니다. 다음 명령어를 사용하여 Create React App을 설치합니다.

npx create-react-app my-app

위 명령어를 실행하면 기본적인 폴더 구조와 필요한 파일들이 생성됩니다.

2. 컴포넌트 작성

두 번째로, 동적 웹 페이지를 구성하는데 필요한 컴포넌트를 작성해야합니다. React에서는 컴포넌트는 UI를 구성하는 작은 독립적인 요소입니다. 각 컴포넌트는 render() 메서드를 통해 반환되는 JSX(JavaScript XML) 형식으로 작성됩니다.

예를 들어, 아래와 같이 간단한 컴포넌트를 작성할 수 있습니다.

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      greeting: 'Hello, React!'
    };
  }

  render() {
    return <h1>{this.state.greeting}</h1>;
  }
}

export default MyComponent;

위의 코드에서 MyComponent는 React.Component를 상속받은 클래스입니다. 이 클래스의 render() 메서드에서는 동적으로 변경되는 greeting state를 사용하여 화면에 표시될 내용을 동적으로 업데이트합니다.

3. 컴포넌트 조합

세 번째로, 작성한 컴포넌트를 조합하여 웹 페이지를 구성합니다. 예를 들어, 다음과 같이 App 컴포넌트에서 MyComponent를 렌더링할 수 있습니다.

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

function App() {
  return (
    <div>
      <h1>Welcome to My Web Page</h1>
      <MyComponent />
    </div>
  );
}

export default App;

위 코드에서 MyComponent를 App 컴포넌트 내에서 <MyComponent /> 형식으로 사용하여 해당 컴포넌트를 렌더링합니다.

4. 웹 페이지에 렌더링

마지막으로, 작성한 컴포넌트를 웹 페이지에 렌더링해야합니다. index.js 파일을 열고 다음과 같이 수정합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

위 코드에서 ReactDOM.render() 함수는 App 컴포넌트를 'root' 요소에 렌더링합니다. 'root' 요소는 public/index.html 파일에 존재하는 <div id="root"></div> 요소를 의미합니다.

마무리

React.js를 사용하여 동적 웹 페이지를 구축하는 방법을 살펴보았습니다. React의 강력한 컴포넌트 기반 아키텍처를 사용하면 코드의 재사용성과 유지보수성을 높일 수 있습니다. 이를 통해 사용자에게 동적이고 반응적인 웹 페이지를 제공할 수 있습니다.

#React #웹개발