[React] 리액트 개요

DOM : 하나의 웹 페이지 정보를 모두 담고 있는 자바스크립트 객체

화면 구조의 변경이 있을 경우 DOM으로부터 수정할 부분을 찾아 일일이 다 수정된 후 전체 구조 생성

→ 보다 효율적인 방법

• 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 게 아니라 기존 뷰를 다 버리고 처음부터 새로 뷰를 생성하여 보여주는 방식
  • 장점
    • 어떻게 변화를 줄 지 신경 쓸 필요 없음
    • 변화가 있으면 기존 것은 버리고 정해진 규칙에 따라 새로 뷰를 생성하여 보여줌
  • 단점
    • CPU 점유율 증가

리액트 → facebook에서 개발한 유저인터페이스 라이브러리

• JSX(JavaScript XML) 사용
• 데이터 바인딩 용이
  

SSR	CSR
서버 측 랜더링 최초 화면 로딩이 빠름 화면 갱신이 느림 부분 갱신을 위한 전체 페이지 reload	클라이언트 측 랜더링 최초 화면 로딩이 느림 화면 갱신이 빠름 필요한 부분만 부분 갱신

CSR

클라이언트 측 랜더링

• 최초 화면 로딩이 느림
• 화면 갱신이 빠름
• 필요한 부분만 부분 갱신

SPA(Single Page Application)

• 하나의 페이지로 구성된 어플리케이션
• 새로운 페이지를 로딩하지 않음
• 웹이 마치 앱처럼 동작
• 초기 로딩 시간이 소요되지만 그 이후 페이지 탐색에 대한 UX가 높아짐
• 다양한 JavaScript 프레임워크들이 사용됨
  • Angular, React, Vue etc

기존

• AJAX를 이용해 페이지의 일부만 갱신할 수 있다.
  • 어플리케이션이 커질수록 작업이 복잡해짐 ( DOM요소 선택 → HTML조작 → 데이터 바인딩 )
  • 느려질 수 있음 ( DOM변화 → CSS 연산 → 레이아웃 구성 )

리액트

• 자바스크립트의 라이브러리의 한 종류로 오직 VIEW만 신경쓰는 라이브러리
  • 초기 렌더링 : 최초 실행 렌더링 ( 사용자 화면에 뷰를 보여주는 것 )
  • 리렌더링 : 데이터 변경 시 다시 실행되는 렌더링
• 렌더링 : 사용자 화면에 뷰를 보여주는 것
• 컴포넌트 : 재사용이 가능한 수많은 API 기능들을 내장하고 있음
• Virtual DOM 사용
  • 웹 페이지와 DOM사이의 중간 매개체 역할 → 빠른 렌더링 가능
  • 대규모 어플리케이션 구축할 때 효과를 얻을 수 있다.