리엑트 기초 개념 정리 - 1(SPA, DOM)

React

사용자 인터페이스를 만들기 위한 javascript 라이브러리

• 리액트네이티브라는 프레임워크로 모바일앱개발도 가능. 안드로이드는 코틀린 ios는 스위프트를 배워야 함.
• 리액트의 단점은 계속 배워야하고 상태관리 복잡도가 매우 높다는 것. 상태관리의 기본개념을 제대로 이해하는 것이 중요

SPA(Single Page Application)

• 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미
• 사용자가 애플케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML 화면을 받아오는 방식이 아니라 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리
• 단일 페이지 애플리케이션이라고 일컬어지지만 하나의 페이지만 존재하는 애플리케이션을 의미하지는 않음. SPA도 여러 페이지가 존재하는데 다수의 페이지를 표시하는 데 있어서 과거 전통적인 방식으로 페이지 전환을 수행하지 않고 마치 하나의 페이지인 것처럼 처리하는 기술을 의미

리엑트가 사랑 받는 가장 큰 이유는 빠른 속도!!
리액트는 가상돔(Virtual DOM)을 사용해 보다 효율적으로 우리가 원하는 페이지를 브라우저에 빠르게 그려줌

DOM(Document Object Model)

• 브라우저 객체모델(BOM) 중 하나이며, XML, HTML 문서에 접근하기 위한 인터페이스
• 넓은 의미로 웹 브라우저가 HTML페이지를 인식하는 방식. DOM은 트리형식의 자료구조
• 트리의 최상단 root에 html이 위치하여 하위노드에 head, body가 위치하고 있으며 그 하위에 여러 노드들이 포함되어 있다.
• DOM이 없다면 웹페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 가지지 못한다.
• 웹브라우저는 "HTML해석 -> 렌더링 (화면에 출력)" 하는 과정을 거친다.
• HTML 해석 (코드해석) 과정에서 요소들을 트리 형태로 구조화 해 표현하는 것을 DOM이라고 한다.
• 브라우저는 DOM을 통해 화면에 웹 콘텐츠를 렌더링 한다.

  HTML 해석 -> DOM (HTML 문서에 대한 인터페이스) -> 렌더링 (화면에 출력)

DOM의 목적

• JS를 사용해 이 문서에 대한 스크립트를 작성 할 수 있게 해주는데 목적이 있다.

요약

• DOM은 HTML 문서에 대한 인터페이스
• DOM은 HTML 코드를 해석 -> 요소들을 트리형태로 구조화 해 표현하는 방식
• DOM은 자바스크립트를 사용해 웹화면의 콘텐츠를 추가, 수정, 삭제하거나 이벤트를 처리할 수 있도록 하는 프로그래밍 인터페이스

Virtual DOM

Virtual DOM은 실제 DOM의 가벼운 복사본으로 메모리에 저장된 자바스크립트 객체. 실제 DOM과 동일한 구조를 가지지만 브라우저에 직접 접근하여 조작할 수 없다는 특징이 있음.

Virtual DOM 사용 이유

• 성능향상
  • Diffing: Virtual DOM과 새로 생성된 Virtual DOM을 비교하여 실제로 변경된 부분만 찾음
  • Batch Update: 변경된 부분을 한 번에 실제 DOM에 반영하여 불필요한 DOM 조작을 줄임
  • 브라우저 렌더링 최소화: 변경된 부분만 업데이트하여 브라우저가 전체 페이지를 다시 렌더링하는 비용을 줄임

React에서 Virtual DOM 활용

• Re-redering: 상태(state)가 변경될 때마다 새로운 Virtual DOM을 생성
• Diffing: 이전 Virtual DOM에서 새 Virtual DOM을 비교하여 변경된 부분 찾음
• Reconcilation: 변경된 부분만 실제 DOM에 반영
• 성능향상: 불필요한 DOM 조작을 줄여 웹 애플리에키션의 성능을 향상
• 개발 생산성 향상: 복잡한 DOM 조작을 추상화하여 개발자가 UI 로직에 집중할 수 있도록 함

컴포넌트

• 컴포넌트는 구성요소다
• 리액트에서는 모든 페이지가 컴포넌트로 구성되어있다. 하나의 컴포넌트는 다른 여러 개의 컴포넌트로 이루어져 있을 수 있다. 그로인해 리액트를 사용하면 마치 레고블럭을 조립하듯이 개발 됨
  • 장점: 재사용성과 메타라는 IT기업의 든든한 지원과 활발한 지식 공유와 커뮤니티가 형성되어있음.

참고 자료

• https://rebornbb.tistory.com/entry/JavaScript22-05-27-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EB%B3%B8%EB%AC%B8%EB%B2%95-%E2%98%91
• https://rebornbb.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%9D%B8%ED%94%84%EB%9F%B0-%EA%B0%95%EC%9D%98-%EA%B8%B0%EC%B4%88-%EA%B0%9C%EB%85%90-%EC%A0%95%EB%A6%AC-DOM-JSX-Element