[React] React 시작하기

목차

React 시작하기: 첫 번째 애플리케이션 만들기 🚀✨

안녕하세요, 웹 개발에 관심 있는 모든 분들! 오늘은 JavaScript의 가장 인기 있는 라이브러리 중 하나인 React를 사용하여 첫 번째 애플리케이션을 만드는 방법에 대해 알아보겠습니다. React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. 이 글을 통해 React의 기본 개념을 이해하고, 간단한 애플리케이션을 만드는 첫 걸음을 내디뎌 보겠습니다.

---

React와 그 인기의 이유

• 선언적 뷰: React를 사용하면 데이터가 변경될 때마다 앱의 UI를 자동으로 업데이트하는 선언적 뷰를 구현할 수 있습니다.
• 컴포넌트 기반 아키텍처: UI를 독립적인 재사용 가능한 컴포넌트로 나누어 개발할 수 있어, 코드의 관리가 용이합니다.
• 학습 커브: JavaScript에 익숙하다면 React를 배우고 사용하기까지의 학습 곡선이 상대적으로 완만합니다.

 

첫 번째 React 애플리케이션 만들기

1. 개발 환경 설정

첫 번째 React 애플리케이션을 만들기 위해 Node.js가 설치된 환경이 필요합니다. Node.js를 설치한 후, 다음 명령어를 사용하여 Create React App을 설치합니다.

npx create-react-app my-first-react-app

이 명령어는 my-first-react-app이라는 디렉토리를 생성하고, 필요한 React와 그 의존성을 설치합니다.

 

2. 애플리케이션 실행

설치가 완료되면, 생성된 디렉토리로 이동하여 애플리케이션을 실행합니다.

cd my-first-react-app
npm start

이제 브라우저에서 http://localhost:3000으로 접속하면, 첫 번째 React 애플리케이션이 실행되는 것을 볼 수 있습니다.

 

3. Hello World 컴포넌트 만들기

React 애플리케이션의 핵심은 컴포넌트입니다. 간단한 Hello World 컴포넌트를 만들어 보겠습니다. src 폴더 안에 App.js 파일을 열고, 다음과 같이 수정합니다.

import React from 'react';

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

export default App;

 

4. 애플리케이션 변경 사항 확인

코드를 저장하고 브라우저를 새로고침하면, "Hello, World!" 메시지가 표시되는 것을 볼 수 있습니다. 이처럼 React를 사용하면 컴포넌트 기반으로 UI를 쉽게 구성하고, 데이터가 변경될 때마다 UI를 자동으로 업데이트할 수 있습니다.

 

마무리하며...

React는 현대적인 웹 애플리케이션 개발에 있어 강력한 도구입니다. 오늘 소개한 기본 단계를 통해 React의 세계로 첫 발을 내딛었으니, 이제 React의 다양한 기능과 API를 탐색하며 더 복잡한 애플리케이션을 만들어 보세요.

---

Reference:

React

Create React App

Node.js