자바스크립트 공부 글도 다 마무리를 안 지어놓고 무슨 리액트냐 하시면.
아예 안 하는 것보단 갑자기라도 뭐라도 하는게 낫지 않느냐고 답하겠습니다.
저희 동아리에서 사용하는 교과서는 리액트를 다루는 기술 개정판입니다.
사실 동아리에서 따라가면서 정말 ??? ???? ????? 의 연속이라고밖에 말할 수 없었지만 오히려 그렇기 때문에! 최선을 다해 다시 되짚어보고 뒤처진 진도를 따라잡아 보고자 오랜만에 이 황무지 블로그에 다시 나무를 심게 되었습니다.
첫 번쨰 포스팅은 간단하게 코딩 없는 1장의 중요한 내용을 적어 보겠습니다.
자바스크립트로 애플리케이션을 만들기 위한 다양한 프레임워크가 있습니다. 이 프레임워크들은 MVC 아키텍처, MVVM 아키텍처, MVW 아키텍처 등의 구조를 이루고 있는데, 이들의 공통점은 모델과 뷰라는 구조가 있다는 것입니다. 모델은 데이터를 관리하고, 뷰는 보여지는 부분을 담당합니다. 데이터가 바뀌면 뷰에 반영하면서 뷰를 변형하게 되는데, 이 과정에서 뷰의 어떤 부분을 어떻게 찾아서 변형하느냐는 문제가 생깁니다.
리액트는 변화가 있으면 기존 뷰를 전부 다시 로드하는 아이디어로 만들어졌습니다. 하지만 그 과정에서 성능 등의 문제가 생기겠지만, 그것을 최적화하여 만들어졌습니다.
리액트는 오직 뷰만 신경쓰는 라이브러리입니다.
특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트라고 하고, 이 컴포넌트들을 모아서 뷰를 만듭니다.
맨 처음 어떻게 보일지를 정하는 초기 렌더링을 담당하는 render 함수가 있습니다.
컴포넌트가 어떻게 생겼는지 정의하고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 관한 객체를 반환합니다.
컴포넌트 내부에는 또 다른 컴포넌트가 들어갈 수 있습니다. render 함수는 이 때 내부에 있는 컴포넌트들도 재귀적으로 렌더링합니다. 최상위 컴포넌트까지 렌더링하고 나서 가진 정보들을 이용하여 HTML 마크업을 만들고, 실제 페이지의 DOM요소 안에 주입합니다.
리액트 라이브러리에서 뷰를 업데이트하는 과정은 조화 과정이라고 합니다.
컴포넌트에 데이터 변화가 있을 때마다 새로운 요소로 갈아끼운다고 표현합니다. 컴포넌트는 데이터가 수정되었을 때 새로운 데이터를 가지고 render 함수를 다시 호출합니다. 그리고 바로 DOM에 반영하는 게 아니라 이전에 render 함수가 만들었던 컴포넌트 정보와 새로운 컴포넌트 정보를 비교합니다. 두 가지 뷰를 최소한의 연산으로 비교한 뒤 둘의 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트합니다. 이러한 방법으로 자원을 최적화할 수 있습니다.
리액트의 주요 특성 중 하나는 Virtual DOM을 이용한다는 것입니다.
DOM이란 HTML이나 XML로 작성한, 객체로 문서 구조를 표현하는 방법입니다. 웹 브라우저가 자바스크립트와 CSS를 적용하기 위해서 이러한 DOM을 활용합니다. DOM은 트리 형태로, 특정 노드를 찾거나 제거하거나 수정하고 삽입할 수 있습니다.
사실 DOM은 동적 UI에 최적화되어있지 않습니다. HTML 자체로는 정적인데 자바스크립트를 사용하여 동적으로 만드는 것인데, 그것도 많은 데이터를 로딩하면 엄청나게 느려집니다.
DOM 자체보다도, DOM에 변화가 생기면 웹브라우저가 다시 페이지를 그리는 것이 시간이 걸리는 것이죠.
이 문제를 해결하기 위해 리액트에서는 DOM을 최소한으로 조작하여 작업을 처리하는 방법을 택했습니다. Virtual DOM을 사용하여 DOM 업데이트를 추상화함으로서 DOM 처리 횟수를 최소화합니다.
버추얼 DOM이라고 항상 빠른 것은 아니고, 지속적으로 데이터가 변화하는 대규모 애플리케이션에 적합한 기술입니다.
