반응이란 무엇입니까? 그것은 어떻게 작동합니까? Vartual DOM, 소품 및 상태, 구성 요소, JSX, 구성 요소 수명 주기..

React Js란 무엇입니까?

React는 구성 요소를 기반으로 사용자 인터페이스를 구축하기 위한 오픈 소스 프론트 엔드 JavaScript 라이브러리입니다. Facebook과 개별 개발자 및 회사 커뮤니티에서 유지 관리합니다. React는 단일 페이지 또는 모바일 애플리케이션 개발에 사용할 수 있습니다. React는 배우기 쉽습니다. 그것은 맛보고 디버깅 친화성을 가져야 합니다. 애플리케이션의 성능을 향상시킵니다. 그것은 거대한 커뮤니티를 가지고 있습니다. 재사용 가능한 구성 요소 기반 라이브러리입니다. 구성 요소는 웹 사이트에서 다양한 부분을 사용할 수 있습니다. React에는 다음과 같은 몇 가지 단점이 있습니다. SEO 친화적이지 않습니다. 문서가 좋지 않습니다.
기본적으로 react는 컴포넌트 기반 라이브러리입니다. 반응 응용 프로그램은 다중 구성 요소를 사용하여 만듭니다. 구성 요소는 반응 응용 프로그램의 일부입니다. 구성 요소는 반응 응용 프로그램에 아무것도 표시하기 전에 JSX를 바닐라 자바 ​​스크립트로 렌더링합니다. 반응 응용 프로그램이 모든 작업/이벤트를 수행할 때 전체 반응 응용 프로그램이 업데이트되지 않습니다. 무대 뒤에서 React는 업데이트된 가상 돔을 생성한 다음 실제 돔과 비교하여 부분이 변경됩니다. 비교 후 실제 돔에서 변경된 부분만 업데이트됩니다.

JSX

JSX는 자바스크립트 언어 구문의 확장입니다. HTML처럼 보이지만 HTML이 아닙니다. 많은 개발자에게 익숙한 구문을 사용하여 구성 요소 렌더링을 구성하는 방법을 제공합니다. 구성 요소 내부의 반응 앱에서 JSX를 작성합니다. 일반 js 객체로 변환됩니다. {} 중괄호를 사용하여 jsx에서 javascript를 작성할 수 있습니다.
예시:

const DemoFunciton = () => {
    const Name = "Amirul Islam Shanto";
    return (
        // jsx start here
        <div>
            <h1> My Name Is {Name} .</h1>
            <h5> I Am A MERN Stack Developer.</h5>
        </div>
    );
};

가상 돔

Dom은 문서 개체 모델을 의미합니다. 가상 DOM은 메모리에 보관되고 react-dom과 같은 실제 DOM By 라이브러리와 동기화된 원본 DOM의 복사본일 뿐입니다. React는 메모리에 실제 DOM의 가벼운 표현을 유지하며, 이를 가상 DOM이라고 합니다. 가상 dom은 머신의 청사진과 같습니다. 청사진에 대한 변경 사항은 머신 자체에 반영되지 않습니다. 실제 DOM은 더 느리게 업데이트되고 가상 DOM은 더 빠르게 업데이트됩니다. 실제 DOM은 HTML을 직접 업데이트할 수 있고 가상 DOM은 HTML을 직접 업데이트할 수 없습니다.
웹 페이지에서 어떤 작업이 발생할 때. 웹 페이지는 가상 돔을 생성하고 먼저 가상 돔의 변경 사항을 업데이트합니다. 그리고 Diff 알고리즘이라는 알고리즘으로 가상 돔과 실제 돔을 비교했습니다. 비교 후 가상 돔에서 변경된 실제 돔 특정 부분을 업데이트합니다.

구성 요소 수명 주기:

getInitialstate(): 구성 요소가 생성되기 전에 실행됩니다.

componentDidMount(): 컴포넌트가 DOM에서 렌더링될 때 실행됩니다.

shouldComponentUpdate(): 구성 요소가 DOM에 대한 변경 사항을 결정하고 특정 조건에 따라 "true"또는 "false"값을 반환할 때 실행됩니다.

componentDidUpdate(): 렌더링이 발생한 후에 실행됩니다.

componentWillUnmount(): 컴포넌트가 영구적으로 파괴되고 마운트 해제되기 전에 실행됩니다.

요소

구성 요소는 모든 반응 응용 프로그램의 블록입니다. 단일 응용 프로그램은 여러 구성 요소에 의해 생성됩니다. 기본적으로 구성 요소는 사용자 인터페이스의 일부입니다. 인터페이스를 개별적으로 처리할 수 있는 독립적이고 재사용 가능한 부분으로 분할합니다.
React에는 두 가지 유형의 구성 요소가 있습니다.
기능적 구성 요소.
클래스 구성 요소.
예시:

//Functional component
import React from 'react';
const DemoComponent = () => {
    return (
        <div>
            <h1>This is Functional component..</h1>
        </div>
    );
};
export default DemoComponent;
//Class Component
import React, { Component } from 'react';
class DemoComponent extends Component {
    render() {
        return (
            <div>
                <h1>This is class component..</h1>
            </div>
        );
    }
}
export default DemoComponent;

소품 및 상태

상태는 구성 요소에 대한 데이터를 포함하는 데 사용되며 시간이 지남에 따라 변경될 수 있는 업데이트 가능한 구조입니다. 그리고 Props는 읽기 전용 구성 요소입니다. 태그의 속성 값을 저장하는 객체입니다. Prop은 변경할 수 없지만 상태는 변경할 수 있습니다. Props를 사용하면 데이터를 구성 요소에 전달할 수 있습니다. 그리고 상태는 구성 요소에 대한 데이터를 보유할 수 있습니다. stateless 구성 요소에는 props가 있지만 state는 없습니다. Props는 컴포넌트를 재사용 가능하게 만들지만 state는 컴포넌트를 재사용 가능하게 만들 수 없습니다.