React 시작하기 - Node.js 설치부터 기본 컴포넌트 만들기

React는 사용자 인터페이스(UI)를 만들 때 많이 사용되는 JavaScript 라이브러리입니다. 이번 포스팅에서는 React를 처음 설치하고, 간단한 컴포넌트를 만드는 방법까지 단계별로 정리해 보겠습니다.

1. Node.js 설치

React를 사용하기 위해서는 먼저 Node.js를 설치해야 합니다. Node.js는 JavaScript 런타임으로, React 개발 환경을 구축할 때 필수적으로 필요합니다.

• Node.js 다운로드 링크

설치가 완료되면 터미널을 열고 다음 명령어로 Node.js와 NPM(Node Package Manager)이 잘 설치되었는지 확인할 수 있습니다.

node -v
npm -v

2. Create React App으로 React 프로젝트 생성

이제 React 프로젝트를 쉽게 시작할 수 있는 Create React App 도구를 사용해 보겠습니다. 터미널에서 아래 명령어를 실행해 React 애플리케이션을 만들어 주세요.

npx create-react-app my-app

• npx: Node.js와 함께 설치된 명령어 실행 도구입니다.
• my-app: 프로젝트 이름입니다. 원하는 이름으로 변경할 수 있습니다.

3. 프로젝트 실행

프로젝트 생성이 완료되면, 해당 디렉터리로 이동해 React 개발 서버를 실행합니다.

cd my-app
npm start

브라우저에서 http://localhost:3000을 열면 기본적으로 설정된 React 애플리케이션이 실행되는 것을 확인할 수 있습니다.

4. 기본 파일 구조

프로젝트 생성 후 기본 파일 구조는 다음과 같습니다:

• src/App.js: 주요 React 컴포넌트를 작성하고 수정하는 파일입니다.
• src/index.js: 애플리케이션의 진입점 파일로, 여기서 App.js를 가져와 브라우저에 렌더링합니다.

5. React 컴포넌트 이해하기

React의 핵심은 컴포넌트입니다. 컴포넌트는 독립적인 UI 조각을 의미하며, 이러한 컴포넌트를 조합해 복잡한 UI를 구성할 수 있습니다.

1. 기본 함수형 컴포넌트 작성

React 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있지만, 최근에는 함수형 컴포넌트가 주로 사용됩니다. 기본적인 함수형 컴포넌트를 작성해 보겠습니다.

src/App.js 파일을 열고 아래 코드로 변경합니다.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

이 코드는 div 요소 안에 h1 태그로 "Hello, React!"라는 문구를 출력하는 간단한 컴포넌트입니다.

2. JSX 문법

React에서 사용하는 특별한 문법인 JSX는 JavaScript 코드 안에서 HTML과 유사한 코드를 작성할 수 있게 도와줍니다. JSX의 기본 규칙은 다음과 같습니다:

• 닫는 태그: 모든 태그는 반드시 닫아야 합니다. 예를 들어 <img />, <br />와 같은 자주 쓰이는 태그도 반드시 닫아야 합니다.
• 하나의 부모 요소: JSX 코드에서는 반드시 하나의 부모 요소로 모든 내용을 감싸야 합니다. 여러 요소가 있을 경우 <div>로 감싸는 것이 일반적입니다.

3. 다중 컴포넌트 사용

React에서는 여러 컴포넌트를 조합해 더 큰 UI를 만들 수 있습니다. 이번에는 간단한 Header 컴포넌트를 추가해 보겠습니다.

src/Header.js 파일을 생성한 뒤, 아래처럼 작성합니다.

import React from 'react';

function Header() {
  return (
    <header>
      <h2>This is the Header</h2>
    </header>
  );
}

export default Header;

이제 App.js에서 Header 컴포넌트를 가져와 함께 사용해 보겠습니다.

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

function App() {
  return (
    <div>
      <Header />
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

위 코드를 실행하면, Header와 App 컴포넌트가 함께 화면에 렌더링됩니다.