React.js 시작하는 방법 알아보기.Tutorial.

React.js란?

React.js는 Facebook에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리입니다. React.js는 가상 DOM을 사용하며, 데이터와 뷰를 동기화하는데 매우 효율적입니다. 또한, React.js는 컴포넌트 기반 아키텍처를 사용하므로 코드의 재사용성이 높습니다.

React.js 시작하기

React.js를 시작하려면 먼저 Node.js를 설치해야 합니다. Node.js는 React.js를 실행하는 데 필요한 런타임 환경입니다.

Node.js 설치하기

Node.js는 공식 웹사이트에서 다운로드하여 설치할 수 있습니다.

React.js 설치하기

React.js를 설치하기 위해서는 Node.js의 npm(Node Package Manager)을 사용합니다. 다음 명령어를 입력하여 React.js를 설치할 수 있습니다.

npm install react react-dom

React.js 앱 만들기

React.js를 이용하여 앱을 만들기 위해서는 create-react-app이라는 도구를 사용합니다. create-react-app은 React.js 앱 개발에 필요한 빌드 및 개발 환경을 자동으로 설정해줍니다.다음 명령어를 입력하여 create-react-app을 설치하고, 앱을 만들어 보겠습니다.

npm install -g create-react-app

create-react-app my-app

위 명령어를 입력하면 my-app이라는 디렉토리가 생성되고, 해당 디렉토리에서 React.js 앱을 실행할 수 있습니다.

React.js 컴포넌트 만들기

React.js 앱을 만드는 가장 기본적인 단위는 컴포넌트입니다. 컴포넌트는 재사용 가능한 UI 조각으로, 하나의 컴포넌트는 하나의 기능을 담당합니다. 예를 들어, 버튼, 입력창, 메뉴 등이 모두 하나의 컴포넌트가 될 수 있습니다.다음은 간단한 Hello World 컴포넌트를 만드는 예시입니다.

import React from 'react';
function HelloWorld() {  
    return (    <div>      <h1>Hello World!</h1>    </div>  );
}
export default HelloWorld;

위 코드는 React 라이브러리를 불러와 HelloWorld 컴포넌트를 정의하고, return 문으로 컴포넌트의 UI를 정의합니다. export default 구문을 사용하여 HelloWorld 컴포넌트를 외부에서 사용할 수 있도록 합니다.

React.js 앱 실행하기

이제 React.js 앱을 실행할 차례입니다. create-react-app으로 생성한 앱 디렉토리로 이동하여 다음 명령어를 입력합니다

npm start

위 명령어를 입력하면 앱이 브라우저에서 실행됩니다. 만약 브라우저에서 앱이 자동으로 열리지 않는다면, http://localhost:3000/ 주소로 접속해 보세요.

React.js 컴포넌트 사용하기

앱에서 컴포넌트를 사용하려면 다음과 같이 코드를 작성합니다.

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

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

위 코드는 React 라이브러리와 ReactDOM 모듈을 불러와 HelloWorld 컴포넌트를 렌더링합니다. ReactDOM.render() 메서드는 첫 번째 인자로 렌더링할 컴포넌트, 두 번째 인자로 컴포넌트를 렌더링할DOM 요소를 전달합니다.

React.js Props 사용하기

컴포넌트를 만들 때 Props를 사용하여 데이터를 전달할 수 있습니다. 다음은 Props를 사용하여 이름을 입력받아 출력하는 컴포넌트의 예시입니다.

import React from 'react';
function Greeting(props) { 
    return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

위 코드는 Greeting 컴포넌트를 정의하고, Props로 name을 전달받아 UI에 출력합니다.

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

ReactDOM.render(<Greeting name="Alice" />, document.getElementById('root')); 

위 코드는 Greeting 컴포넌트를 사용하여 name이 “Alice”인 인사말을 출력합니다.

마무리

위에서는 React.js를 시작하는 방법과 기본적인 컴포넌트 작성법, Props 사용법 등을 알아보았습니다. React.js는 UI 개발을 더욱 편리하게 해주는 라이브러리이며, 자바스크립트를 사용하여 작성할 수 있기 때문에 다양한 개발 환경에서 활용이 가능합니다. React.js를 이용하여 다양한 UI를 만들어 보세요!