[React] React.js란?

개요

React에 대한 내용을 오늘 처음 접했고, React가 무엇인지, 특징은 어떤게 있는지에 대한 내용을 간단하게 정리해보려고 한다.

 

1. React란?

 

React는 Facebook을 개발한 Meta에서 개발한 JavaScript 라이브러리로 UI를 구축하는 데 사용된다.

Vue.js나 Angular.js와 같이 웹페이지를 만들 수 있는 다른 프레임워크와는 다르게,

React는 UI를 구성하는 역할만을 담당하는 라이브러리이다.

 

그래서, 라우팅이나 상태 관리와 같은 기능은 추가 라이브러리를 통해 확장해야 한다.

 

*라이브러리 & 프레임워크

: 라이브러리

-> 특정 기능을 수행하는 코드 집합으로, 개발자가 원하는 방식으로 선택해 사용할 수 있다.

 

: 프레임워크

-> 애플리케이션의 구조와 동작 방식을 강제하는 종합적인 개발 도구이다.

 

즉, 제어 흐름 자체가 라이브러리 -> 개발자 / 프레임워크 -> 프레임워크에 있다.

 

2. 주요 특징

2-1. 컴포넌트 기반 아키텍처

 

-> React는 UI(View)를 독립적인 컴포넌트(Component) 단위로 나누어 관리한다.

-> 이때, 각 컴포넌트는 자체적인 상태(State)와 속성(props)를 가진다.

-> 기능 단위의 컴포넌트 단위로 쪼개져 있어서 재사용성이 높다.

-> 또한, 수정 사항이 발생했을 때 특정 컴포넌트만 수정하고 import 하면 되기 때문에 코드의 유지보수 및 관리가 용이하다.

 

2-2. 가상 DOM(Virtual DOM)

* DOM(Document Object Model)

-> 웹 페이지의 구조를 계층적으로 표현한 트리 형태의 모델이다.

-> HTML, CSS 등의 문서가 브라우저에 의해 인식되면, 각 요소가 노드(Node)로 변환되어 DOM 트리를 구성하게 된다.

-> 하지만 Node 들이 변경될 때마다 전체 DOM을 다시 그려야 하고, 이는 성능 상에 문제가 될 수 있다.

 

가상 DOM

-> 위의 DOM을 다시 그려야하는 문제를 해결하기 위해 등장했다.

-> 실제 DOM의 사본 역할로, React에서는 UI가 변경될 때마다 새로운 가상 DOM을 생성한 뒤, 이전의 가상 DOM과 비교하며 변경된 부분만 찾아 실제 DOM에 반영한다.

 

동작 방식

1) 렌더링 요청

-> 상태(state) 속성(props)가 변경되면 React는 새로운 가상 DOM을 생성한다.

 

2) 비교

-> React는 이전 가상 DOM과 새로운 가상 DOM을 비교해 변경된 요소를 찾는다.

 

3) 패치

-> 변경된 요소만 실제 DOM에 반영해 최소한의 업데이트를 수행한다.

 

2-3. 단방향 데이터 흐름

-> 양방향 데이터 흐름의 경우 규모가 커질수록 데이터의 흐름을 추적하기 힘들고 복잡해지는 경향이 있다.

-> 그렇기에 React에서는 단방향 데이터 흐름을 따르기로 했다.

 

2-4 JSX(JavaScript XML)

-> JSX는 JavaScript 내부에서 HTML과 유사한 문법을 사용해 UI를 정의하는 방식이다.

-> HTML과 유사한 문법을 사용해 UI 구조를 직관적으로 표현할 수 있다.

-> HTML 요소와 JavaScript 로직을 하나의 파일에서 관리할 수 있다.

 

코드를 통해 JSX를 썼을 때와 안 썼을 때를 비교해보면 위 설명에 대해 쉽게 알 수 있다.

 

<JSX를 썼을 때>

import React from 'react';

function HelloWrold(){
    return <h1> Hello, World! </h1>;
}

export default HelloWrold;

 

 

<쓰지 않았을 때>

import React from 'react';

function HelloWorld() {
    return React.createElement('h1', null, 'Hello, World!');
}

export default HelloWorld;

 

확실히 직관적인 것은 JSX를 사용했을 때 인듯.

 

2-5 Props와 State

속성(Props)

-> 부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터이다.

-> 부모 컴포넌트가 새로운 Propos를 전달하면, 자식 컴포넌트는 이를 받아 렌더링한다.

 

function ChildComponent({ message }) {
  return <p>{message}</p>;
}

function ParentComponent() {
  return <ChildComponent message="Hello from Parent!" />;
}

 

상태(State)

-> 컴포넌트 내부에서 관리되는 변경 가능한 데이터이다.

-> 즉 사용자와의 상호작용을 통해 데이터가 동적으로 변경할 수 있는 것이다.

 

 

이렇게 React를 정리해봤는데 장단점을 보자면,

장점

-> 컴포넌트 단위의 개발을 통한 재사용성

-> 가상 DOM을 활용한 빠른 렌더링

-> 다양한 라이브러리 지원

 

 

단점은... 높은 학습 곡선인 것 같다 공부할게 많다.