개념 - MoonGyeongHyeon/React_Study GitHub Wiki

React - 개념

React란?

Javascript UI 라이브러리로, 개발자로 하여금 재사용 가능한 UI를 생성할 수 있도록 해준다. 페이스북에서 개발했으며, 현재 페이스북, 인스타그램, 야후 등 큰 서비스에 많이 활용되고 있다. MVC 패턴 중 V를 담당하고 있어, Angular, Vue와 함께 인기가 많다. (React는 라이브러리 형태이나 프레임워크처럼 사용된다.)

React의 동작 방식.

Virtual DOM 이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 UI를 렌더링한다. 따라서, 최소한의 DOM 처리로 컴포넌트들을 업데이트할 수 있도록 한다.

Virtual DOM이란?

DOM 이해하기

DOM 이란 Document Object Model의 약자이다. 객체를 통해 구조화된 문서를 표현하는 방법이며, XML 또는 HTML로 작성된다. 웹 브라우저는 이 DOM을 활용하여 객체에 Javascript와 CSS를 적용한다. DOM은 트리 형태로 되어있어서 특정node를 찾거나 수정, 제거, 삽입 등을 할 수 있다.
DOM 문제점

DOM 자체는 빠르다. 자바스크립트의 객체를 처리할 때의 성능과 비교해서 다를게 없다. 하지만 브라우저 상에서 DOM 변화가 발생했을 때, 브라우저가 다시 CSS를 연산하고 레이아웃을 구성하고 웹페이지를 리페인트하는 일련의 과정에서 시간이 허비된다는 문제점이 있다.
Virtual DOM

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신에, 이를 추상화시킨 자바스크립트 객체를 구성하여 사용한다. 마치 실제 DOM의 가벼운 사본과도 비슷하 느낌이다.

DOM에 변화가 생기면 렌더 트리를 재생성하고(모든 요소들의 스타일이 다시 계산된다.) 레이아웃을 만들고 페인팅을 하는 과정이 생긴다. 복잡한 SPA에서는 DOM 조작이 많이 발생하게 되는데, 그건 곧 변화를 적용시키기 위해 브라우저가 많이 연산을 해야한다는 소리고 비효율적인 프로세스가 된다는 것이다.

하지만 Virtual DOM이 있다면? 만약 뷰에 변화가 있을 때, 그 변화를 실제 DOM에 적용하기 전에 가상의 DOM에 먼저 적용시키고, 그 최종적인 결과를 실제 DOM으로 전달한다. 그럼 브라우저 내에서 발생하는 연산을 줄이면서 성능을 개선시킬 수 있게 된다.
Virtual DOM 없이도?

Virtual DOM이 없어도 위의 과정을 구현할 수 있다. 변화가 있을 때, 그 변화를 묶어서 DOM fragment에 적용한 다음 기존 DOM에 적용시키면 된다. 하지만 그럼에도 Virtual DOM을 사용하는 데에는 이유가 있다. DOM fragment를 관리하는 과정을 수동으로 할 필요 없이, 자동화, 추상화할 수 있다. 뿐만 아니라, 만약 이 작업을 수동으로 한다면 기존 값 중 어떤게 바뀌었고 어떤게 안바뀌었는지를 계속 파악하고 있어야 하는데 그것 또한 Virtual DOM이 자동으로 해준다. 마지막으로, DOM 관리를 Virtual DOM이 하도록 함으로써, 컴포넌트가 DOM 조작 요청을 할 때 다른 컴포넌트들과 상호작용을 하지 않아도 되고, 특정 DOM을 조작할 것이라던지 이미 조작했다던지에 대한 정보를 공유할 필요가 없다. 즉, 각 변화들의 동기화 작업을 거치지 않으면서도 모든 작업을 하나로 묶어주는 것이다.

React에서 데이터가 변하여 브라우저 상의 실제 DOM을 업데이트할 때에는 다음과 같이 3가지 절차를 밟는다.

데이터가 업데이트되면 전체 UI를 Virtual DOM에 적용시킨다.
이전 Virtual DOM에 있던 내용과 현재의 내용을 비교한다.
바뀐 부분만 실제 DOM에 적용된다.

결국, 컴포넌트가 업데이트될 때 레이아웃 계산이 한번만 이루어진다.

특징

Virtual DOM
JSX: JSX(JavaScript Xml)는 Javascript의 확장 문법이다. DOM 엘리먼트들을 만들 때, Javascript 형식으로 작성해야 하는 것을 XML과 비슷한 형태로 작성할 수 있게 해준다. 필수는 아니고 권장사항.
Component: React는 모두 Component에 대한 것이다. React 개발을 할 때에는 모든 것을 Component로서 생각해야 한다.

장점

Virtual DOM을 이용한 성능 향상.
클라이언트, 서버 중 어디에서도 렌더링 될 수 있다.
Component의 가독성이 매우 높고 간단하여 유지보수가 쉽다.
프레임워크가 아닌 라이브러리로서 다른 프레임워크와 사요잉 가능하다.

제한

어플리케이션의 View만을 다루므로, 나머지 부분은 다른 기술을 사용해야 한다.
React 버전 v15부터 IE 8 이하의 버전을 지원하지 않는다. (IE 8 이하는 v0.14 버전을 사용해야 한다.)

페이스북은 React 버전을 v0.14에서 v15 로 바꿨다. 그 이유는 production에서 사용해도 된다는 안정성을 약속하고 강조하기 위함이라고 한다.

예제

var HelloWorld = React.createClass({
    render: function () {
        return (
            <p>
                안녕, <input type="text" placeholder="이름을 여기에 작성하세요"/>!
                지금 시간은 {this.props.myDate.toTimeString()} 입니다.
            </p>
        );
    }
});

setInterval(function () {
    React.render(
        <HelloWorld myDate={new Date()}/>,
        document.getElementById('example')
    );
}, 500);

React.createClass 함수는 새로운 React 객체(==UI 컴포넌트, 커스텀 태그?)를 생성하는 함수이다. 컴포넌트의 동작 형태를 결정하는 건 매개변수로 넘기는 Object의 'render' 속성 값에 의해 결정된다. render 속성 값은 function() 으로, html 태그를 return한다. 결과적으로, 'HelloWorld'라는 객체는 render의 return 값을 바탕으로 만들어내는 커스텀 html 태그가 되는 것이다.

위의 예제 코드는 <p> 태그를 반환하는 function()을 render의 속성 값으로 설정한다. 그 후, 그 Object를 매개변수로 React.createClass 함수를 호출하여 UI 컴포넌트를 생성하고 HelloWorld에 할당시킨다.

this.props.myDate.toTimeString() 을 하나씩 풀어보도록 하자. this의 경우 HelloWorld 자체를 의미할 것이다. props는 해당 컴포넌트의 속성 값을 저장하고 있는 Object이다. myDate는 테스트를 위해 사용할 속성의 이름을 임의로 myDate라고 지정해놓은 것이다. toTimeString() 함수는 myDate에 미리 정의된 함수를 호출한다.

setInterval() 함수를 통해 주기적으로 React의 커스텀 태그를 rendering할 것이다. 첫 번째 매개변수로는 callback함수를 넣고, 두 번째 매개변수로는 주기를 입력한다. callback함수를 보면, React.render() 함수를 호출하는 부분이 있는데, React.render() 함수는 매개변수로 커스텀 태그와 그 커스텀 태그의 내용을 어떤 html 태그에 삽입할 지를 받는다.