React

• 리액트는 사용자 인터페이스(UI) 를 만들기 위한 JavaScript 라이브러리 입니다.

• 현재 가장 주목받는 프론트엔드 프레임워크는 리액트, 앵귤러(Angular), 뷰(Vue) 입니다. 이 중 가장 사용자가 많은 프레임워크는 리액트입니다.

  (참고: Angular는 화면 출력, 형상 관리부터 배포까지 많은 기능을 포함한 완성형 프레임워크를 지향합니다. Vue는 가장 최근에 등장한 프레임워크로, 다른 프레임워크의 장점은 흡수하고 단점은 보완했습니다.)

  

  • 리액트의 특징

    • 재사용 · 유지보수에 용이한 컴포넌트 구조로 이루어져 있어 효율적 리액트는 화면 출력에 특화된 프레임워크로 컴포넌트(component)라는 독립적인 코드 블록을 조합하여 효율적으로 화면을 구성합니다. 컴포넌트는 데이터(props, state)를 입력 받아 DOM Node를 출력하는 "함수"의 역할을 합니다.

      

    • Virtual DOM

      Virtual DOM을 통한 rendering으로 화면 출력 속도를 높이고, 코드의 복잡성을 줄였습니다. (변화를 Virtual DOM에 먼저 적용하고, Real DOM과 비교를 통해 변화된 부분만 render하여 연산을 줄여 줍니다.)

      

    • 단방향 데이터 바인딩

      부모 컴포넌트로부터 자식 컴포넌트로 props전달. 부모 컴포넌트의 데이터에 접근하려면 부모로부터 함수를 전달 받아서 사용