React
리액트는 페이스북이 만든 사용자 UI구축을 위한 라이브러리이다. 오직 사용자의 view에만 초점을 맞추고 있다. 그래서 Routing같은 기술은 리액트에 존재하지 않는다. 이러한 리액트는 다음과 같은 3가지의 특징을 지닌다.
1. JSX 문법
JSX문법은 자바스크립트 안에서 HTML문법을 사용해 view를 구성할 수 잇게 도와주는 JS문법이다. 이는 리액트 개발에 많은 도움을 준다.
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}위와 같이 JS안에 html태그가 들어가있다.
2. Component 기반
리액트는 컴포넌트 기반 라이브러리이다. 컴포넌트 기반이라 함은 기존의 웹페이지를 작성할때 처럼 하나의 html코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가시켜준다.
Component로 생각하기
위의 사진처럼 하나의 기능만을 수행할 수 있는 여러개의 컴포넌트로 나누어 생각하고 설계한뒤 그것을 조립하는 방향으로 리액트 앱 개발을 진행할 수 있다.
3. virtual DOM
가상 DOM은 기존 DOM의 한계를 탈피하기 위해 나온 대안이다. DOM은 문서 객체 모델을 뜻한다. 우리가 사용하는 HTML 단위 하나하나를 객체로 생각한 모델이다.
이러한 DOM은 트리구조로 되어있다. 만약 프로그래머가 어떠한 DOM의 요소를 수정하고자 한다면, 그러한 함수를 만들고 실행할때 렌더 트리를 재생성하고 레이아웃을 만들고 페인팅을 하는 과정이 다시 반복된다.
만약 SPA(Single Page Application)개발을 통해 DOM의 요소를 자주 많이 수정한다면 수정할때 마다 불필요한 연산이 발생한다.
이러한 문제를 해결하기 위해 가상 DOM이 등장한다. 가상 DOM은 변화를 가상 DOM에서 미리 인지해 변화시킨다. 이러한 작업은 실제 DOM이 아니기에 렌더링되지 않으며 연산비용이 비교적 실제 DOM보단 적다. 그리고 가상 DOM변화를 마지막에 실제 DOM에게 던져주어 모든 변화를 렌더링하게 한다. 이렇게 되면 가상 DOM은 바뀌지 않은 부분과 바뀐 부분을 자동으로 감지해 업데이트 해준다. 이러한 과정에서 우리가 웹서비스를 이용할때 일부 기능이 변화해도 화면 전체가 깜빡(전체가 다시 렌더링)되지 않는 이유이다.
