[React] 리액트 개요 및 특징

리액트는 자바스크립트로 만들어진 라이브러리이다.

 

js로 만들어진 라이브러리는 웹개발에 문외한인 나도 몇개는 알고있을 정도로 굉장히 유명하다.

 

리액트도 그중 하나이며 JQuery, Angular, Express, Vue.js, Node.js, Next.js 등등 엄청 많다. 

 

각 라이브러리마다 쓰임새가 다른데 우리가 공부하는 리액트는 어떤 역할일까?

 

우선 리액트는 프론트엔드 즉, 사용자 인터페이스를 만드는 라이브러리이다.

 

 

그럼 왜 리액트는 인기가 많을까?

 

리액트는 우선 기존의 MVC(Model - View - Controller), MVVM(Model - View - View Model) 패턴과는 다른

 

오직 뷰만 중시하는 패턴이다.

 

Model은 애플리케이션에서 사용하는 데이터를 관리하는 영역,

 

View는 사용자에게 실제 보여지는 부분,

 

Controller는 Model 데이터를 조회하거나 수정하고, 변경된 사항을 View에 반영하는 역할이다.

 

 

 

MVC나 MVVM패턴에서 데이터의 수정이 이루어졌을 때, 일일이 수정된 부분을 찾아서 바꿔준다.

 

아래 예시를 보자.

{
	"title" : "Hello",
    "contents" : "Hello World",
    "author" : "velopert",
    "likes" : 1
}

이러한 json 객체를 사용하는 View가 있다 가정해보자.

 

<div id="post-1">
	<div class="title">Hello</div>
    <div class="contents">Hello World</div>
    <div class="author">velopert</div>
    <div class="likes">1</div>
</div>

이때 likes를 2로 업데이트 한다면 post-1의 요소들을 일일이 순회하며 likes 요소를 찾은 다음,

 

내부를 수정하게 된다.

 

문제는 일일이 순회하는 비용이 프로젝트가 커지면 커질수록 늘어난다는 것인데,

 

이러한 오버헤드를 줄이기 위해 리액트에서는,

 

데이터가 변할 때, 그 변화에 맞춰 일일이 수정하지 않고, 기존 View를 날려버리고

 

처음부터 새로 렌더링 하는식으로 처리한다.

 

그저 View가 어떻게 생길지 정한다음, 데이터에 변화가 있으면 기존 View를 버리는 형태이다.

 

 

 

이것이 어떻게 가능할까?

 

아니 가능은 하겠는데, 오히려 오버헤드가 더 늘어나지 않을까?

 

이는 컴포넌트를 활용한 리액트만의 렌더링(Rendering) 방식으로 해결한다.

 

 

컴포넌트? 그게 뭔가요

컴포넌트는 다른 프레임워크에서 사용되는 템플릿과 조금은 다른 개념이다.

 

우선 템플릿은 Dataset이 주어지면 HTML 태그 형식을 문자열로 반환하는데,

 

컴포넌트는 재사용 가능한 API도 내장하고 있으며 개별 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의한다.

 

 

리액트만의 렌더링이란?

어떤 라이브러리, 프레임워크든 간에 UI가 어떻게 보일지 정하는 초기 렌더링이 필수이다.

 

리액트에서는 렌더링 방식을 2가지로 나누었다.

 

- 초기 렌더링

- 리렌더링

 

두가지 렌더링 방식 모두 render() 함수를 이용한다.

 

초기 렌더링에서, 이 함수는 컴포넌트가 어떻게 생겼는지 정의한다.

 

HTML 형식의 문자열을 반환하지 않고, View가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌

 

객체를 반환한다.

 

또한, 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있으며 이때 렌더링은 재귀적으로 이루어진다.

 

최상위 컴포넌트의 렌더링이 끝나면 HTML 마크업 ex)<div>...</div> 를 만들고, 이를 우리가 만드는 

 

실제 페이지의 DOM 요소안에 주입한다.

 

초기 렌더링 과정

 

리렌더링 과정은 어떻게 진행될까?

 

앞에서 말했던것과 같이, 리렌더링도 똑같이 render()를 이용해 진행된다.

 

다만, 바로 DOM 요소에 주입하는게 아닌

 

바로 이전의 render()가 만들었던 컴포넌트 정보와 현재 render()하려는 컴포넌트 정보를 비교한다.

 

리렌더링할 때 DOM 트리를 비교

 

두가지 View를 비교한 후, 업데이트 될 애들만 DOM 트리에서 업데이트 해준다.

 

처음부터 다시 렌더링 하는것처럼 보이지만, 최소한의 연산으로 비교후 업데이트가 필요한 부분만 업데이트 해줌!

 

 

참고

 

https://book.naver.com/bookdb/book_detail.nhn?bid=15372757 

리액트를 다루는 기술