[React] React에 대해서

🤔 React란?

 

React란 사용자 인터페이스를 구축하기위한 작고 고립된 컴포넌트로 이루어진 효율적이고 유연한 자바스크립트 라이브러리라고 하는데 여기서 컴포넌트(Component)는 하나의 작업을 수행하기 위한 작은 단위라고 한다.

 

React는 디자인 패턴 중 MVC패턴에서 사용자에게 보여지는 부분인 view를 담당한다.

 

React 대중성

 

 

여기서 React의 실사용률을 가늠해보자면 Angular 그리고 Vue와 비교해봤을 때 다운로드 수가 4.5배나 높다.

이는 React가 대중적이고 가장 많이 사용되고 있단 걸 확인 할 수 있다.

 

이렇게 많이 사용되고 있다는 것은 그만큼 관련된 문서가 많고, 커뮤니티에 대중적이라는 것이다.

 

 

 

지난 1년간 Angular vs React vs Vue npm다운로드 수 비교 (출처:https://www.npmtrends.com)

 

 

React를 선택하는 이유

• 독립적이다.
• 재사용성이 높다.
• 성능이 좋다(효율적) 
• 배우기 쉽다.

 

컴포넌트 클래스 구성

React는 컴포넌트 단위로 이루어진 UI 라이브러리라고 했다.

그렇다면 컴포넌트 클래스는 어떻게 구성될까?

 

컴포넌트 클래스는 사용자의 데이터를 가지고 있는 State 오브젝트와 사용자에게 어떻게 보여줄것인지를 정의하는 Render함수로 이루어져 있다.

 

아래 코드는 좋아요 수를 나타내는 버튼이다.

import React from 'react';

class LikeButton extends Component {
 	state = {
 		numberOfLikes = 0,
    };
    render() {
    	return <button>
        	{this.state.numberOfLikes}
        </button>;
    }
 }
 
 export default LikeButton;
    

 

1. 사용자의 데이터를 가지고있는 State

  state = {
 		numberOfLikes = 0,  // 좋아요 수 0
    };

 

2. 사용자에게 보여지는  Render함수

 render() {
    	return 
        <button>
        	{this.state.numberOfLikes}   
        </button>;
    }

 

 

VDOM(Virtual Document Object Model)

React가 성능이 좋은 이유로는 가상의 DOM을 가지고 있기 때문이다.

 

React에서 사용자의 데이터가 변화할 때 즉, State의 값이 변경될 때 Render함수가 계속 호출이 되는데

여기서 의문이 생길 수 있다.

 

사용자의 데이터 값이 변경될 때마다 사용자에게 보여지는 부분을 정의하는 Render함수가 반복적으로 호출이 된다면 성능이 안좋지 않을까? 너무 비효율적이지 않을까?

 

만약 Render함수 안에 또 다른 컴포넌트가 있다면 그리고 그 안에 또 컴포넌트가 여러개 있다면?

 

브라우저에 페이지가 표시되기 위해서는 DOM Tree가 형성이 되는데 React도 브라우저와 마찬가지로 VDOM Tree가 형성이 된다.

VDOM 트리는 previous tree 즉, 이전 트리와 비교해서 사용자에게 실질적으로 변경되는 부분만 DOM tree에 업데이트 된다.

따라서 아무리 많은 Render함수가 호출이 되어도 실질적으로 보여지는 데이터가 변경되지 않는다면 DOM 트리에 전혀 영향을 주지 않는다.