개요
웹 개발의 가장 기본적인 HTML, CSS, JS의 대한 지식을 어느정도 쌓아서
이제 프레임워크를 선택할 때가 왔다.
웹 프레임워크는 React, Angular, Vue, Svelte 등 다양한 종류가 있지만
나 같이 처음 프레임워크를 배우는 사람은
여타 다른 프레임워크와 비교했을 때 점유율이 가장 높은 React를 선택하지 않을까 싶다.
React를 배우기에 앞서,
React가 가지고 있는 특징과 그 특징으로 발휘되는 장점에 대해서 간략하게 설명하고 가면 좋을 것 같아서 해당 글을 작성한다.
React란?
React는 2013년 페이스북에서 개발한
웹 UI 개발을 위한 자바스크립트 라이브러리이다.
React는 다른 프레임워크와는 다르게
웹의 프론트엔드,
즉 서버와 데이터베이스를 포함하지 않고,
사용자 인터페이스 개발에 특화되있기 때문에
프레임워크가 아닌 라이브러리란 정의가 더 부합해 보인다.
React의 필요성
통신 속도의 비약적인 향상으로
웹 페이지는 이제 더이상 단순한 이미지와 단순한 텍스트로만 이루어진 것이 아니라
브라우저 안에서 사용자와 동적으로 상호작용하며
복합적인 기능들을 수행할 수 있게 되었다.
이러한 동적 상호작용의 대표격인 SPA 방식의 웹 개발은
바닐라 JS와 일반 HTML, CSS로 구현하기 복잡하여 어렵다는 단점이 있다!
React는,
개발자들이 이러한 모던한 동적 웹페이지, 웹 애플리케이션을
보다 편리하게 개발할 수 있도록
만든 자바스크립트 라이브러리이다.
React의 특징들
1. 가상 DOM (Virtual DOM)
가상 DOM을 알기 위해서는 우선 DOM이 무엇인지 알아야한다.
그리고 DOM을 알기 위해서는 웹 브라우저가 어떻게 Render되는지도 알아야한다.
웹 브라우저가 시각적으로 우리에게 보여지는 요소들을 Rendering하는 과정을 간략하게 설명하면 다음과 같다.
1. 웹브라우저 엔진은 HTML을 파싱하여 DOM 트리를 만든다.
2. CSS도 파싱하여 CSSOM 트리를 만든다.
3. 만약 자바스크립트가 변경하려는 DOM 요소가 있다면, 만들어진 DOM 객체에 접근하여 DOM을 변경한다.
4. 변경된 DOM과 CSSOM을 매치하여 렌더 트리를 만든다.
5. 브라우저는 만들어진 렌더 트리를 참고하여 사용자에게 렌딩한다.
HTML과 CSS, 그리고 자바스크립트는 모두 다른 형식의 언어이다. 우리가 웹 개발을 하면서 빈번하게 일어나는
자바스크립트로 HTML 요소들을 추가, 변경 하는 동작들을 구현하기 위해서는 매개체가 필요할 것이다.
이 매개체를 DOM(Document Object Model)이라고 할 수 있다.
따라서 DOM이란 이름 그대로 자바스크립트가 HTML, CSS에 관여하기 위해 접근하는 문서 객체 모델을 말한다.
이러한 DOM 트리를 이용한 Render 방식은 비교적 간단명료하지만, 큰 단점이 있다.
바로 불필요한 Rerendering이 일어난다는 것이다.
예를 들어보겠다.
위의 Todo 앱에서 사용자가 Enter 버튼을 통해서 "음악 듣기"를 입력하면 어떠한 변화가 있을까?
위와 같이 하나의 아이템만 추가된다.
이 때, 내부적인 동작으로 자바스크립트는 DOM 트리를 이용해 HTML 요소를 조작한 후
다시 CSSOM과 결합하여 다시 렌더 트리를 생성한 후 다시 브라우저에 렌더링을 한다.
여기서 문제가 발생한다.
우리는 꼴랑 아이템 하나만 추가했을 뿐인데, 브라우저 엔진은 처음부터 다시 렌더 트리를 생성한 후
다시 렌더링 하기 때문에 변화가 없는 부분 또한 변화되는 불필요한 렌더링이 발생하는 것이다.
위와 같은 단순한 프로그램은 재생성하는 렌더링이 몇 개 없기 때문에 크게 문제되지 않아 보이지만,
만약 웹 앱에서 렌더링할 컴포넌트들이 엄청나게 많다면, 단순히 아이템 하나 추가할 때 마다 전체를 렌더해야 하기 때문에 성능 저하가 발생할 수 있다.
이 문제에 대한 해결책으로 React는 가상 DOM을 사용한다.
가상 DOM이란 실제 DOM 트리와 똑같은 DOM 트리를 메모리 상에서 가상으로 복사한 것을 말한다.
이 가상 DOM은 만약의 데이터의 변화가 일어났을 경우, 먼저 가상 DOM에서 DOM 트리를 구성한 후에
실제하는 DOM 트리와 가상 DOM 트리를 비교해서, 바뀐 부분만 갱신한다. 이로써 불필요한 렌더링을 최소화하는 것이다.
단방향 데이터 바인딩
데이터 바인딩이란 사용자에게 보여지는 VIEW 영역과 내부적인 연산이 이루어지는 MODEL 영역의 데이터를 일치시키는 것을 말한다.
만약 Model에서 데이터 변경이 이루어졌는데 사용자가 보고있는 View에서 갱신이 안된다면, 사용자는 실제와 다른 데이터를 보고 있는 것이다. 그렇기 때문에 데이터 바인딩은 중요하다.
이 때 데이터 바인딩의 흐름이 어떻게 흐르냐에 따라서 양방향과 단방향으로 구분할 수 있다.
양방향 데이터 바인딩은
View에서 변경이 발생하면 Model도 데이터 변경, Model에서 데이터가 변경되면 View의 데이터도 변경되는 쌍방향 데이터 바인딩이라고 볼 수 있다.
이러한 데이터 바인딩 기법은 프레임워크에서 관리하는 Watcher가 직접 바인딩을 관리하므로, 코드의 양을 줄여주지만
데이터를 조작하는 상황이 많이 발생하면 Watcher의 증가로 성능 저하가 발생할 수 있으며, 데이터 추적이 상대적으로 복잡하다.
양방향 데이터 바인딩으로 동작하는 프레임워크는 Angular와 Vue가 있다.
단방향 데이터 바인딩은
오로지 Model에서 View의 데이터를 조작하고, View에서는 Model의 데이터를 조작할 수 없다.
단방향 데이터 바인딩에서 View에서 데이터를 조작하는 경우는, View에서 이벤트를 발생시켜 해당 이벤트를 통해서 모델의 데이터를 조작하는 것으로 데이터 바인딩을 구현한다.
단방향 데이터 바인딩은 이러한 이벤트를 구현해야 하므로 코드의 양이 많아지지만, 단방향이기 때문에 데이터의 추적이 용이하고 디버깅이 쉬우며, Watcher가 하나이기 때문에 성능 저하 이슈를 해결한다.
React는 단방향 데이터 바인딩으로 동작한다.
JSX (Javascript XML)
JSX란 자바스크립트 내부에서 HTML 코드를 직접 사용할 수 있는 React의 템플릿 언어이다.
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;위와 같이 자바스크립트와 HTML 태그를 같이 사용할 수 있으며
HTML 태그 안에 자바스크립트 변수를 사용할 수 있다.
위와 같은 JSX는 코드의 사용성을 높이고, 직관적이고 유연한 프로그래밍을 가능하게 한다.
컴포넌트 기반의 프로그래밍
React는 컴포넌트라는 개념을 통해서 웹에서 보여지는 UI들을 특정한 성질에 맞게 모듈화하여, 코드의 재사용성을 대폭적으로 증가시킨다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}위와 같이 매개변수로 이름을 전달 받아 Welcome을 출력하는 UI를 함수처럼 모듈화하여, 언제든지 재사용할 수 있게 하여
편리하고 유지 보수를 원할하게 한다.
오늘은 React가 가지고 있는 대표적인 특징을 정리해봤다.
어느정도 뇌피셜이 들어가서 틀린 부분이 있을 수 있다.