React 소개 및 활용 방법

1. 들어가기

안녕하세요! 이번 포스트에서는 현대 웹 애플리케이션 개발에서 널리 사용되는 자바스크립트 라이브러리인 React에 대해 알아보겠습니다. 이 글에서는 React의 기본 개념, 사용법, 설치 방법, 예제 코드 등을 다루고, React를 배우고 활용하는 데 도움이 될 추가 정보를 제공하겠습니다.

 

 

2. React 기본 개념

React는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하기 위해 사용됩니다. React는 컴포넌트라는 작은 단위로 애플리케이션을 구성하도록 설계되어 있으며, 각 컴포넌트는 독립적인 기능과 상태(state)를 가집니다. 이를 통해 높은 재사용성과 효율적인 개발이 가능합니다.

 

3. React 설치 방법

React를 설치하려면 먼저 Node.js가 설치되어 있는지 확인해야 합니다. Node.js가 설치되어 있다면, 터미널에서 다음 명령어를 실행하여 Create React App을 설치합니다.

npx create-react-app my-app

위 명령어를 실행하면 my-app이라는 새로운 프로젝트 폴더가 생성되고, 필요한 라이브러리와 구성 파일이 설치됩니다. 프로젝트 폴더로 이동하여 개발 서버를 실행합니다.

cd my-app
npm start

개발 서버가 실행되면 브라우저에서 http://localhost:3000 주소로 접속하여 개발 중인 애플리케이션을 확인할 수 있습니다.

Create-react-app 시작 화면

4. 예제 코드

간단한 React 예제 코드를 통해 "Hello, React!" 메시지를 출력해 보겠습니다. my-app 프로젝트 폴더의 src 폴더에 있는 App.js 파일을 다음과 같이 수정합니다.

// App.js
import React from 'react';

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

export default App;

개발 서버가 실행 중인 상태에서 위 코드를 저장하면, 브라우저에서 바로 변경 사항이 반영되어 "Hello, React!" 메시지가 출력됩니다.

 

5. 컴포넌트 생성 및 사용

React는 컴포넌트 기반으로 애플리케이션을 구성합니다. 간단한 컴포넌트를 생성하고 사용해 보겠습니다. 먼저, src 폴더에 Greeting.js 파일을 만들고 다음과 같이 작성합니다.

// Greeting.js
import React from 'react';

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default Greeting;

Greeting.js 파일에 Greeting 컴포넌트를 작성했습니다. 이 컴포넌트는 name이라는 속성을 받아 "Hello, {name}!" 메시지를 출력합니다. 이제 App.js 파일에서 Greeting 컴포넌트를 사용해 봅시다.

// App.js
import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="React" />
    </div>
  );
}

export default App;

이제 브라우저에서 "Hello, React!" 메시지가 출력됩니다. 컴포넌트를 사용하여 코드를 모듈화하고 재사용성을 높일 수 있습니다.

 

6. 상태(state) 관리

React에서는 상태를 사용하여 애플리케이션의 동적인 데이터를 관리합니다. useState라는 Hook을 사용하여 상태를 추가하고 변경해 보겠습니다.

App.js 파일을 다음과 같이 수정합니다.

// App.js
import React, { useState } from 'react';
import Greeting from './Greeting';

function App() {
  const [name, setName] = useState('React');

  const handleChange = (event) => {
    setName(event.target.value);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <Greeting name={name} />
    </div>
  );
}

export default App;

위 코드에서는 useState를 사용하여 name 상태를 추가하고, 입력 값이 변경될 때마다 상태를 업데이트합니다. 이제 브라우저에서 텍스트 입력란에 값을 입력하면 동적으로 메시지가 변경됩니다.

이상의 더 자세한 내용에 대해서는 https://ko.reactjs.org/  의 공식 사이트에서 필요한 개념에 대해서 천천히 공부해 나가보시기 바랍니다.