Yong Study

리액트 ( React )

• UI 라이브러리
• Virtual DOM 개념을 이용하여 전체가 아닌 선택적으로 유저 인터페이스를 렌더링
• 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교 한 후 바뀐 부분을 실제 DOM에 적용

Single Page Application

다시 전체 리로드가 필요없음.

기존에선 요청이 서버로 가면 전체가 새롭게 리프레쉬됨

↔

하지만 SPA는 한번만, 그 시점에서 백엔드에서 전체 웹페이지를 고치지 않고 html dom을 동적으로 업데이트 함

Facebook, gmail등이 이런 방식으로 작동하게 되는데 필요한 부분만 업데이트, 전체 페이지만 업데이트 하는것이 아님

• 장점

  • Virtual DOM이 실제 DOM보다 빨라 성능 향상
  • 필요한 데이터만 가져오기에 매우 빠름
  • 개발이 편함
    • 같은 백앤드로 여러 프론트 담당, 재사용 용이
    • 가독성 높고 유지보수 용이
  • 응용프로그램 전체가 자신의 컴퓨터에서 실행되기에 오프라인에서도 작업 가능
  • 프레임워크가 아닌 라이브러리기에 혼용 사용

• 단점

  • 보안에 취약
    • 크로스 사이트 스크립팅(XSS) 활성화로 삽입공격 막아야 함
  • 메모리 누수
  • 하위버전 웹브라우저 지원불가

JSX는JS 문법을 확장, 이를 통해 JS XML HTML등을 쉽게 혼합할 수 있다.

삽입된 모든 값을 렌더링하기 전에 위험한 HTML 구문에 대해 자동으로 이스케이프 하므로 위에서 언급한 단점인 보약의 취약한 점을 XSS 공격 방지할 수 있음

단, 웹 브라우저는 JSX를 이해하지 못하기에 JSX→HTML JS로 변환 할 누군가가 필요

1. 코드를 트랜스 파일 할 수 있는 컴파일러 babal을 포함하거나
   • 이 BABEL 라이브러리를 통해 런타임시 즉석에서 변환
2. Node를 사용하여 완전한 개발 환경을 설정해야 함
   • Create-React-App

참조하면 좋은 블로그 글

React 완벽정리 (react란? 장점, 단점 등)

JSX 소개 - React