왜 React일까?
보통 새로운 기술이 메이저가 되는 이유는 2가지 방향으로 생각할 수 있다. 이전 기술의 단점을 보완하는 기술이거나 새 기술이 너무나도 뛰어난 장점을 가지고 있거나.
기존에 자바스크립트만으로 웹페이지를 만들어 왔는데, 프로젝트의 규모가 커지고 사용자의 동적인 요소에 반응하도록 웹페이지를 만들며 더 복잡해져왔다.
이러한 상황에서 React는 프론트엔드의 메인 기술(웹페이지 구축을 위한 라이브러리)이 되었다.
React는 그렇다면, 자바스크립트의 단점을 보완하고 있을까? 아니다. 자바스크립트의 단점은 타입스크립트가 보완하고 있다. 그렇다면 우리가 React를 쓰는 이유는 명확해진다. React의 장점이 워낙에 뚜렷하기 때문이다.
React의 장점
1. JSX
Jsx는 javascript 에 xml을 추가한 확장문법의 준말이다.
function App() {
return (
<h1>Hello, World!</h1>
);
}이런 식으로 작성하면, React의 바벨이 자바스크립트 형태의 코드로 변환해서 읽어준다.
function App() {
return React.createElement("h1", null, "Hello, World!");
}JSX의 장점
- 하나의 파일에서 자바스크립트와 HTML을 동시에 작성할 수 있다.
- 함께 작성하기 때문에 가독성이 높아진다. 직관적이다.
2. Virtual DOM
DOM이란 Document Object Model의 준말로, 원본 HTML 문서의 객체 기반 표현 방식이다. 쉽게 말해서... 우리가 HTML을 작성하면 HTML의 코드들이 뷰포트에 보여지기 위해 일종의 나무와 나뭇가지 형태로(tree 형식) 구조화 되는 것이다. 이렇게 틀이 만들어지면 CSSOM 트리가 만들어지고 자바스크립트가 실행 되면서 렌더를 위한 절차를 밟는다.
VirtualDOM
Virtual DOM은 변화가 일어 났을 때, 브라우저의 DOM에 바뀐 것을 바로 넣는 것이 아니라 Virtual DOM이라는 가상의 DOM환경에서 한 번 전체적으로 렌더링을 해보고, 기존의 DOM과 비교하여 바뀐 부분만을 업데이트 하는 것이다.VirtualDom의 장점
- 변화가 일어난 부분만 업데이트가 되는 방식이기 때문에 DOM변화를 최소화 한다. 성능적으로 유리하다.
- 변화가 일어난 부분만 업데이트가 되기 때문에 렌더링이 빠르다.
3. Component
React로 프로그램을 만들기 위해서는 컴포넌트 단위로 구성한다. 레고 완성품을 만들기 위해 레고 블럭들이 모여야 하는 것과 같다.
> Component의 장점
- 컴포넌트의 대표적인 장점으로 재사용이 좋다는 것이다. 하나의 컴포넌트를 만들면 비슷한 부분에서 해당 컴포넌트를 재사용할 수 있다.
- 재사용과 이어지는데, 유지보수가 용이하다. 해당 컴포넌트만 수정하면 되기 때문이다.
