[React.JS] React 소개

React 소개

---

React.JS 란 ?

React.JS는 페이스북에서 개발한 View단을 컨트롤하는 라이브러리 입니다.

Component 단위로 View를 모듈화 하여, 재사용 가능한 UI를 생성 할 수 있게 합니다. React.JS는 가상 DOM(Virtual DOM)이라는 개념을 사용합니다. 만약 DOM이 변경이 되었다면, 기존의 DOM과 가상 DOM을 비교하여,  최소한의 DOM을 변경하여, DOM 변경 시 최적화 합니다.

왜 가상 DOM을 사용하나요 ?

DOM(Document Object Model)은 문서를 객체로 표현하기 위한 표준입니다. 즉, HTML이나 XML 등의 문서를 객체로 표현하기 위한 표준입니다.

DOM은 아래의 예시와 같이 HTML은 트리 구조로 표현됩니다.

<section>
    <div>
        <p>DOM은 트리 구조로 표현됩니다.</p>
    </div>
</section>

DOM은 자체적으로 정적이지만 JQuery등을 사용하여 동적으로 DOM을 다시 그릴 수 있습니다. DOM이 변화되었을 때, 브라우저가 CSS를 다시 계산하고, 레이아웃을 구성하고, 웹페이지에 그리는 과정이 느리기 때문에, 가상 DOM을 두어 가상 DOM과 비교하여 실제로 변경된 DOM만 적용하여 DOM을 다시 그릴 때 속도를 향상 시킬 수 있게 됩니다.

하지만 React가 무조건 빠른 것은 아닙니다.

React.JS는 데이터 변화가 많은 대규모 애플리케이션에서 빛을 바랍니다. 단순히 정적인 웹페이지에서는 오리혀 React를 사용하지 않는 것이 더 나은 성능을 보이기도 합니다.

React의 개발 환경

React.JS는 JSX, ES6 등을 사용하기 때문에(필수는 아니지만 권장하는...) 몇가지 개발 환경을 세팅해야 합니다.

• Package manager, Yarn이나 npm를 사용하면 방대한 양의 third-party 패키지 중, 필요한 패키지를 설치 업데이트 하기 쉽습니다. React.JS 관련 포스트에서는 npm을 이용하여 React.JS를 설치하게 될 것입니다.
• Bundler, React.JS는 ES6의 Import와 export를 사용하기 때문에 webpack 또는 Browerify와 같이 하나의 자바스크립트로 합쳐 최적화를 해줄 bundler가 필요합니다. React.JS 관련 포스트에서는 webpack을 사용합니다.
• Compiler, React.JS는 ES6의 사용을 권장하기 때문에, ES6를 사용하게 됩니다. 하지만 오래된 브라우저의 경우 ES6를 지원하지 않을 수 있기 때문에, ES6로 작성된 코드를 ES5로 컴파일해줄 컴파일러가 필요합니다. 여기서는 Babel을 사용할 것입니다.