리액트 기초 강의 (1) - 기본 개념

1. React : JS에서 HTML을 포함하는 JSX라는 간단한 문법과 단방향 데이터 바인딩을 사용하고 있으며, 

                 Virtual DOM이라는 개념을 사용하여 웹 애플리케이션의 퍼포먼스를 최적한 라이브러리

    => 웹 프레임워크로서, 자바스크립트 라이브러리의 하나로 사용자 인터페이스를 만들기 위해 사용됨

    => facebook에서 제공해주는 프론트엔드 라이브러리

    => 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있음

 

2. 특징

 1) Data Flow 

    => 리액트는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가짐

           (복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있음)

 2) Component 기반구조

    => 독립적인 단위의 소프트웨어 모듈

    => module과 비슷하게 컴포넌트로 이뤄져 있어서 reusable이 좋음 

    => 코드는 반복해 입력할 필요없이 컴포넌트만 import 하여 사용하면 된다는 간편함이 있으며, 

          애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가짐

 3) Virtual DOM

    => DOM : Doucment Object Model

          => html, xml, css 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리함

    => 이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교하여,

          변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있음  

 4) JSX : JS와 HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있으는 일종의 템플릿 언어