리액트란?
React는 UI 구성 요소를 기반으로 사용자 인터페이스를 구축하기 위한 무료 오픈 소스 프런트 엔드 JavaScript 라이브러리입니다. Meta와 개별 개발자 및 회사 커뮤니티에서 유지 관리합니다.

예시

import React from "react";

const Example= () => {
  return (
    <div className="hello_react">
      <h1> Hello, world this is React ! </h1>
    </div>
  );
};

export default Example;

예제 함수는 유명한 소개 "Hello, world this is React"를 표시하는 React 구성 요소입니다.

웹 브라우저에 표시되면 결과는 다음과 같이 렌더링됩니다.

안녕하세요, 세상입니다 이것은 React입니다!

2) 리액트 히스토리
a) React는 Facebook의 소프트웨어 엔지니어인 Jordan Walke가 만들었습니다.

b) 2017년 4월 Facebook은 사용자 인터페이스 구축을 위한 React 라이브러리의 새로운 핵심 알고리즘인 React Fiber를 발표했습니다.

3) React의 장점 및 특징
A) 가상 DOM: 가상 DOM(VDOM)은 UI의 이상적인 또는 "가상"표현이 메모리에 유지되고 React DOM과 같은 라이브러리에 의해 "실제"DOM과 동기화되는 프로그래밍 개념입니다. 이 과정을 화해라고 합니다.

Virtual DOM은 Real DOM과 동일한 속성을 가지고 있지만 화면의 내용을 직접 변경할 수 있는 기능이 부족합니다.

Virtual DOM을 기계의 청사진으로 생각하십시오. 청사진에 대한 변경 사항은 기계 자체에 반영되지 않습니다.

나) 구성요소

React 컴포넌트는 React 애플리케이션의 빌딩 블록입니다. 새로운 React 구성 요소와 기능을 만드는 방법을 알아봅시다.

i) 기능적 구성요소

함수 구성 요소는 일부 JSX를 반환하는 함수로 선언됩니다.

const Example= () => <div>Hello, world this is React !</div>;

ii) 클래스 기반 구성 요소

클래스 기반 구성 요소는 ES6 클래스를 사용하여 선언됩니다.

class ParentComponent extends React.Component {
  state = { color: 'black' };
  render() {
    return (
      <ChildComponent color={this.state.color} />
    );
  }
}

다) JSX

React JSX는 JavaScript의 확장입니다. 이를 통해 개발자는 XML 구문을 사용하여 가상 DOM을 생성할 수 있습니다. 순수한 JavaScript로 컴파일됩니다. JavaScript로 컴파일되기 때문에 유효한 모든 JavaScript 코드 내에서 사용할 수 있습니다. 예를 들어 아래 코드는 완벽하게 유효합니다.

class Example extends React.Component {
  render() {
    return (
      <div>
        <p>Example 1</p>
        <p>React Js</p>
      </div>
    );
  }
}

D) 단방향 데이터 바인딩: ReactJS는 단방향 데이터 바인딩을 사용합니다. 단방향 데이터 바인딩에서 다음 조건 중 하나를 따를 수 있습니다.

i) 보기에 대한 구성 요소: 구성 요소 데이터의 모든 변경 사항이 보기에 반영됩니다.

ii) View to Component: View의 모든 변경 사항은 구성 요소의 데이터에 반영됩니다.

E) 성능: React는 가상 DOM을 사용하고 수정된 부분만 업데이트합니다. 따라서 DOM이 더 빠르게 실행됩니다. DOM은 메모리에서 실행되므로 DOM을 더 빠르게 실행하는 별도의 구성 요소를 만들 수 있습니다.

F) 확장: React에는 본격적인 UI 애플리케이션을 만드는 데 사용할 수 있는 많은 확장이 있습니다. 모바일 앱 개발을 지원하고 서버 측 렌더링을 제공합니다. React는 Flux, Redux, React Native 등으로 확장되어 멋진 UI를 만드는 데 도움이 됩니다.