[React] 원리 이해하기

1. React란? 

쉽게 말하면 사용자 인터페이스를 받아 동적인 웹페이지를 쉽게 만들기 위해서이다. 

• 사용자 인터페이스(UI) 를 구축하기 위한 선언적이고 효율적인 유연한 자바스크립트 라이브러리
• SPA(Single Page Appplication)을 위한 사용자 인터페이스를 구축하는데 사용
• 웹, 모바일 앱 등의 레이어를 처리하는데 사용

 

1. 여기서 UI란? 

 

User Interface: 사람과 컴퓨터가 정보를 쉽게 주고받을 수 있도록 하는 수단으로 사용자와 컴퓨터 프로그램이 의하소통을 할 수 있도록 하는 매개체

 

2. 여기서 SPA 란?

 

Sigle Page Application 의 약자로 단일 페이지로 구성된 웹페이지

 

즉 예전의 방식으로는 어떤 버튼을 클릭하면 페이지의 일부 영역이 조금만 변경되어도 서버에서 그때그때 완전히 새로운 페이지를 재랜더링하여 사용자에게 전송해주었었다.

 

그런데 SPA 방식으로 바뀌고 나서 그냥 웹페이지 같은 구성들을 미리 다 만들어놓고 그냥 그 페이지들을 보여주기만 하면 되는거다!

그러니까 어떤 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경해 표시한다. 최초에 한 번 서버에 요청하여 페이지 전체를 로드하고, 이후부터는 특정 변경사항이 일어나는 부분만 데이터를 바인딩하는 방식이 되어 장점이 늘었다.

 

3. SPA 장점

화면에 필요한 부분의 데이터만 받아서 렌더링 하므로 기존 방식보다 처리 과정이 효율적이며 속도가 빠르다 따라서 사용자에게 보다 더 나은 사용성을 제공한다.

 

 

 

4. React 작동원리 

 

리액트는 항상 두 개의 가상돔을 가지고 있다.

• 렌더링 이전 화면 구조를 나타내는 가상돔
• 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔

리액트는 상태가 변경될 때마다 리렌더링이 발생하는데 이 시점마다 새로운 내용이 담긴 가상돔을 생성하게 된다.

즉 이 업데이트 이전과 이후 가상돔을 비교해 정확히 어떤 엘리먼트가 변했는지를 비교할 수 있다. 리액트는 차이가 발생한 부분만을 DOM에 저장한다. 일괄업데이트(Bash Update) 때문에 매우 효율적이라고 볼 수 있다. 변경된 모든 element 들을 집단화시켜 이를 한버에 실제 dom에 적용하기 때문이다.

 

>>만약 리스트안에 10개의 항목이 바뀌었다면 실제 DOM을 10번 반복해 수정하는 게 아니라 변경된 사항들을 한 번에 받아와, 집단화시켜 이를 한번에 적용한다는 것!

 

※ 새로운 element가 업데이트 된 경우 새로운 가상 DOM생성 후 이전 DOM과 비교 후 차이점 DOM만 업데이트 한다.

 

 

※정리하자면!

 

리액트에서는 어떠한 데이터가 바뀌면 가상돔이 새로 생성이 된다. 그리고 이것을 이전에 생긴 가상돔과 비교해서 바뀐 부분만 실제 돔에 적용을 시켜준다. 이 바뀐 부분을 찾는 과정을 Diffing 이라고 부르는데 바뀐 부분만 실제 돔에 적용시켜주는 것을 재조정이라고 부른다 이때 실제 DOM에는 한 번에 적용시켜준다.

 

5. React 장점

• 재사용성 : 많이 쓰는 코드를 저장해둘 수 있기 때문에 재사용성이 좋음
• 생산성
• 유지보수성