지금 부터 리액트란 무엇인지 알아보도록 하겠습니다.
리액트란?
리액트는 페이스북에서 성능을 아끼고 사용자 경험을 제공하기 위해 구현한 라이브러리 입니다.
리액트는 자바스크립트 라이브러리로, 사용자 인터페이스를 만드는데 사용합니다. 구조가 MVC, MVW등인 프레임워크들과 달리 오직 뷰 만 신경씁니다.
리액트에는 핵심 개념인 컴포넌트 와 렌더링이 있습니다. 지금 부터 이 두가지에 대해서 간단하게 알아보도록 하겠습니다.
컴포넌트(Component)
컴포넌트란 특정부분이 어떻게 생길지 정하는 선언체를 말합니다. 컴포넌트는 재사용이 가능한 API로 수많은 기능들을 내장하고 있고, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동방식을 정의합니다.
렌더링
렌더링이란 사용자 화면에 뷰를 보여주는 것을 말합니다.
리액트가 성능을 아끼고 최적의 사용자 경험을 제공하는 방법에 대해서 자세하게 알아보도록 하겠습니다.
1. 초기렌더링
맨처음 어떻게 보일지를 정하는 것을 초기 렌더링이라고 합니다. 리액트에서는 이를 다루기 위해 render( ) 라는 함수를 사용합니다. 이 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 합니다. render함수는 html 형식의 문자열을 반환하지 않고, 뷰의 정보에 대한 객체를 반환합니다.
2. 렌더함수의 실행
render함수를 실행하게 되면 내부에 있는 컴포넌트 들이 재귀적으로 렌더링 됩니다. 이렇게 렌더링이 끝나면 지니고 있는 정보들을 사용해서 HTML마크업을 만들고 실제페이지의 DOM 요소 안에 주입합니다.
3. 조화과정
사용자 화면에 뷰를 업데이트 할때 바로 DOM에 변경을 하는 것이 아니라 새로운 데이터를 가지고 render함수를 호출합니다. 그리고 이전에 만들었던 컴포넌트와 비교를 합니다.
비교 후, 변경된 부분만 DOM에 업데이트를 합니다. 이와 같이 최소한의 연산을 통해 데이터를 변경하기 때문에 리액트의 성능이 좋은 것을 알 수 있습니다.
참고자료
리액트를 다루는 기술
