React 리액트란? 기본 개념, 컴포넌트, 가상 DOM, 설치까지 한눈에 보기

리액트(React)란?

React는 Facebook에서 개발한 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. 리액트와 같이 웹 개발을 위한 Tool로 Vue나 Angular도 많이 사용되지만, 최근 React의 수요가 더욱 증가하고 있습니다.

https://survey.stackoverflow.co/2023/#most-popular-technologies-webframe

 

라이브러리인 React

React와 Vue, Angular의 가장 큰 차이점은 React는 라이브러리이고, Angular와 Vue는 프레임워크라는 점입니다.

 

라이브러리:  개발하는데 필요한 기능을 모듈화 해놓고, 개발자는 필요한 기능을 호출하여 사용하면 됩니다.

프레임워크: 어플리케이션을 만들기 위한 기본적인 틀은 제공되어 있고, 개발자는 필요한코드를 규칙에 따라 작성해주어 사용하면 됩니다. (프레임워크에 라이브러리도 포함되어 있습니다. 프레임워크는 라이브러리와 개발자가 작성한 코드를 호출하여 개발하도록 해줍니다.)

 

리액트는 프레임워크가 아닌 라이브러리임에도 불구하고 Vue나 Angular보다 더 인기있는 이유는 무엇일까요? 

 

그 이유는 리액트는 UI 라이브러리로써, 전적으로 UI 렌더링 하는 데 관여하기 때문입니다. 즉, 특정한 방식으로 어플리케이션을 구축하도록 강제하지 않기 때문에, 개발자가 필요한 기능을 직접 추가하거나 다른 라이브러리와 결합하는 등 유연성과 단순성이 장점입니다.

 

이 외에도 성능 최적화 기능(가상 DOM, 재사용 가능한 컴포넌트 등)과 관리 용이성(상태 관리 라이브러리인 Redux와 MobX, 테스팅을 위한 Eslint, Mocha 등), 모바일 개발과의 연계성(React Native), 강력한 커뮤니티 지원 등이 리액트를 사용하는 이유입니다.

 

리액트 컴포넌트

React 어플리케이션은 여러 컴포넌트(Component)로 이루어져있습니다.

쇼핑몰로 예를 들면, 검색창, 카테고리, 상품 목록 등이 각각의 컴포넌트입니다. 각 컴포넌트는 독립적으로 상태를 관리하며, 이런 여러 컴포넌트가 조합되어 하나의 복잡한 UI 페이지를 만듭니다. 또한 컴포넌트는 재사용이 가능하여 다른 페이지에서도 활용할 수 있기 때문에, 유지보수와 확장이 용이합니다.

 

리액트 컴포넌트는 두 가지 종류가 있습니다.

1. 클래스형 컴포넌트
2. 함수형 컴포넌트

 

1. 클래스형 컴포넌트

ES6 클래스를 사용하여 클래스 컴포넌트를 정의할 수 있습니다.

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { message: 'Hello' };
  }

  render() {
    return <h1>{this.state.message}, {this.props.name}!</h1>;
  }
}

state를 이용한 복잡한 상태 관리와 라이프사이클 메소드를 사용할 수 있습니다. 때문에 원래 리액트로 개발할 때는 클래스 컴포넌트를 이용해서 많이 개발을 했지만, React 16.8부터 리액트 Hooks가 발표되고 함수형 컴포넌트에서 Hooks를 사용하여 상태 관리와 사이드 이펙트를 처리할 수 있게 되어, 함수형 컴포넌트가 더 많이 사용되고 있습니다.

 

2. 함수형 컴포넌트

import React, { useState } from 'react';

function Hello(props) {
  // useState Hook을 사용하여 상태를 정의
  const [message, setMessage] = useState('Hello');

  return <h1>{message}, {props.name}!</h1>;
}

클래스 컴포넌트에 비해 함수형 컴포넌트의 구문이 간단하여 이해하기 쉽습니다. 또한 상태와 라이프사이클 메소드가 있어 테스트가 복잡한 클래스 컴포넌트에 비해 함수형 컴포넌트는 순수 함수로 작성되기 때문에 테스트하기가 더 쉽습니다. 상태나 라이크사이클 메소드를 사용할 수 없는 것이 단점이었던 함수형 컴포넌트는 리액트 Hooks 도입(`useState`, `useEffect` 등)으로 위와 같이 처리가 가능해졌습니다.

 

리액트 가상돔(Virtual DOM)

리액트는 가상돔(Virtual Dom)을 사용합니다. 가상돔에 대해 설명하기 앞서 돔이란 무엇일까요?

 

돔(DOM: Document Object Model)이란 웹 페이지를이루는 요소들을 트리 구조로 나타낸 객체 모델로써, 프로그래밍적으로 요소들을 이용할 수 있게합니다.

왼쪽 이미지 처럼 HTML을 작성하면 오른쪽 이미지 처럼 계층적으로 조직된 DOM 트리 구조를 확인하실 수 있습니다. DOM 트리를 DOM에서 제공해주는 API를 이용해서 텍스트, 속성, 스타일 등을 조작할 수 있습니다.

// <p> 요소 선택
// <p> 요소의 텍스트 변경
const paragraph = document.querySelector('p');
paragraph.textContent = 'Hello, modified DOM!';

// <a> 요소 선택
// <a> 요소의 href 속성 변경
const link = document.querySelector('a');
link.href = 'https://www.newexample.com';

 

웹 페이지 빌드 과정

1. 브라우저는 HTML 문서를 파싱하여 DOM 트리를 생성합니다. 이 과정에서 HTML 태그는 각각의 노드로 변환됩니다.
2. 브라우저는 CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다. CSSOM은 DOM과 결합하여 렌더 트리를 생성합니다.
3. 브라우저는 각 요소의 위치와 크기, 즉 레이아웃을 계산합니다.
4. 브라우저는 렌더 트리의 각 요소를 화면에 그립니다.
5. 브라우저는 자바스크립트 파일을 파싱하고 실행합니다. 이 과정에서 자바스크립트는 DOM을 조작할 수 있습니다.

DOM의 변화가 생기면 웹 페이지를 빌드하게 되어, 그때마다 렌더 트리를 생성하게됩니다. 그러면 레이아웃도 다시 계산하고, 또 다시 화면에 그려야합니다. 이러한 과정을 큰 비용이 들게 됩니다.

 

가상 DOM 빌드 과정

리액트는 렌더링될 때, 컴포넌트를 읽고 가상 DOM 트리로 만듭니다. 그리고 이 가상 DOM을 기반으로 실제 DOM을 생성하고 업데이트합니다. 어플리케이션에서 상태 변화가 생기면 가상 DOM 트리를 생성합니다. 그리고 이 새로운 가상 DOM은 이전의 가상 DOM과 비교해서 바뀐 부분만 실제 DOM에 적용 시켜줍니다.

가상 DOM과 이전의 가상 DOM을 비교하는 과정을 디핑(diffing)이라 합니다.

 

 

리액트 설치

Node.js

리액트를 설치하려면 Node.js와 npm(Node Package Manager)를 먼저 설치해야합니다. 리액트로 어플리케이션을 개발하는데 유용한 도구들이 Node.js를 필요로하기 때문에 Node.js를 설치해주어야 합니다. Node.js를 설치하면 npm도 같이 설치됩니다. 유용한 도구들은 다음과 같습니다.

• npm: React 및 관련 라이브러리, 도구들을 쉽게 설치하고 관리하는 패키지 관리자입니다.
• Babel, Webpack 등 빌드 도구
• React 개발 중에 로컬 개발 서버가 필요합니다. Node.js는 이를 제공합니다.

Node.js 공식 웹사이트에 들어가 LTS 버전을 다운받으시고 설치하면됩니다. 설치 후, 터미널에서 `node -v`와 `npm -v`로 버전을 확인하여 정상 설치가 되었는지 확인하실 수 있습니다.

💁Babel(바벨)
최신 자바스크립트 문법을 지원하지 않는 구형 브라우저에서도 최신 자바스크립트 문법이 구동될 수 있게 변환 시켜주는 라이브러리입니다.

💁Webpack(웹팩)
여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리입니다. 여러 파일들을 압축하여 최적화할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있습니다.

바벨과 웹팩이 전부 설치되어 있어야 리액트를 실행시킬 수 있습니다. 아래 설명드릴 `npx create-react-app <폴더 이름>`을 통해 리액트를 설치하면, Babel과 Webpack이 같이 설치되어 리액트 프로젝트가 생성됩니다.

 

React 프로젝트 생성 및 실행

 npx create-react-app <폴더 이름>

터미널에서 npx create-react-app <폴더 이름> 명령어를 실행하면 리액트 프로젝트가 생성됩니다.

해당 프로젝트로 이동하여 npm start를 하면 개발 서버가 시작됩니다.

 

Visual Studio Code 에디터를 설치하여 해당 리액트 프로젝트를 구현하면됩니다. (Visual Studio Code 공식 웹사이트)

 

React 애플리케이션 실행

npm run start