왜 React를 사용하는가

정적인 페이지는 웹서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다. 

단순히 기업을 소개하는 페이지라면, 유저와 상호작용은 중요하지 않습니다. 이런 경우 HTML과 CSS의 구성만으로도 충분히 웹 페이지를 작성할 수 있습니다.

 

반면, 동적인 페이지는 유저의 행동 흐름에 따라 웹페이지의 구성을 달리 해주어야 하는 페이지입니다. 즉 유저의 요청 정보를 처리한 후 제작된 HTML 문서를 클라이언트가 받게 됩니다.

 

리액트의 특징

Component 단위 작성

컴포넌트는 UI를 구성하는 개별적인 뷰 단위로 하나의 블록으로 만들어 블록들을 조립하여 하나의 완성품으로 만드는 것과 같습니다. 여러 곳의 같은 디자인의 버튼이 필요하다면 하나의 버튼 컴포넌트를 만들어 여러 곳에서 가져다 사용할 수 있습니다.

 

이러한 특징은 생산성과 유지보수, 재사용성을 향상합니다. 

 

JSX

자바스크립트의 대한 확장 구문으로서 컴포넌트를 구성하는데 쉽게 적응할 수 있습니다.

 

Virtual DOM

유저의 인터랙션에 의해 상태 변화가 일어나면 브라우저 작동원리에 의해 렌더링 과정을 반복하게 됩니다. 이러한 과정에서 발생하는 비효율성을 최소화하기 위해 탄생하게 되었습니다.

 

유저 인터랙션에 의해 View에 변화가 발생하여 10개의 노드를 수정해주어야 한다면 10번의 레이아웃 재계산, 10번의 리 렌더링이 필요하다는 것입니다.

 

Virtual DOM은 변화가 발생하면 실제 DOM에 적용하기 전에 Virtual DOM에 우선 적용시켜봅니다.

 

Virtual DOM에서 이러한 연산이 끝나면 최종적인 변화를 실제 DOM에 전달해줍니다 즉 10번의 작업을 하나로 묶어 딱 한 번 전달해 줍니다. 

 

또한, Virtual DOM은 어떤 게 바뀌었는지, 어떤게 바뀌지 않았는지 자동으로 파악하여 바뀐 DOM 트리만 업데이트합니다.