[1장]React에 대해서

React란?

React는 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리이다.
“컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 UI를 구성한다.

React 특징

1. Component
   대부분의 뷰 프레임워크, 라이브러리가 지원하는 개발 방식을 React도 동일하게 지원한다. 하나의 UI를 작고 고립된 Component를 기반으로 구성해 간다.
   Component로 개발하면 재사용에 큰 이점을 보인다.
   React에서 Component를 선언하는 방식은 아래와 같이 클래스형과 함수형으로 나뉜다.

    //클래스형 컴포넌트
    class HelloWord extends React.Component {
        render() {
            return (
                <h1>Hello, World</h1>
            );
        }
    }
   
    //함수형 컴포넌트
    function HelloWord() {
        return <h1>Hello, World</h1>
    }
   

2. 단방향 데이터 바인딩
   React에서 데이터는 Parent에서 Child로만 전달되고 전달 된 Child에서 UI 변경이 반영이 된다. 대표적인 뷰 프레임워크인 Angular, Vue에서는 양방향 데이터 바인딩을 사용하는데 양방향 데이터 바인딩은 데이터 변경을 프레임워크가 감지하고 변경이 적용될 UI에 모두 반영을 해주게 된다.
   양방향 데이터 바인딩에 비해 단방향 데이터 바인딩의 장점은 DOM 객체를 전체 렌더링 해주지 않으므로 성능면에서 이득을 챙길 수 있다.

3. Virtual Dom
   Virtual Dom을 설명하기 전에 우리는 브라우저가 Dom 구조를 어떻게 나타내는지에 대한 이해가 필요하다.
   
   Dom 구조에 변경이 발생 할 때마다 브라우저는 위 그림과 같은 처리를 계속 하게 되고 이는 곧 Dom 변경이 많이 발생하는 복잡한 SPA(Single Page Application)에서는 성능 저하를 발생 시키게 된다. 이 성능 문제를 개선하기 위해서 사용하는게 Virtual Dom인데, 어떻게 동작하길래 성능이 개선 될까?
   Virtual Dom은 변경 되는 Dom에 대해서 실제 Dom에 즉각 반영 하지 않고 메모리 상의 가상 Dom에 먼저 반영한 뒤 변경이 다 발생 된 최종적인 결과를 현재 실제 Dom과 비교해 변경된 부분만 실제 Dom에 반영한다. 아 그리고, React 공식 문서를 Virtual Dom을 특정 기술로 말하지 않고 패턴에 가깝다고 설명 하고 있다.

참고 자료

[Virtual Dom 관련]
https://velopert.com/3236
https://ko.reactjs.org/docs/faq-internals.html
https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/