• React의 주요 특징

    1. 순수함수로 UI를 표현합니다.
    2. 상태 변화에 따른 UI변화를 효율적으로 관리하기 위해 순수함수 형태로 컴포넌트를 정의합니다.
    3. 코드의 예측 가능성을 높이고, UI의 일관성을 유지하는데 도움을 줍니다.
    4. Virtual-DOM : 실제 돔 변경을 최소화 합니다.
    5. 가상 돔은 메모리 내 가상으로 존재하는 돔 구조로 이를 통해 변경사항을 미리 계산하고 실제 돔을 최소한으로 업데이트합니다. 성능 최적화에 기여
    6. JSX
    7. Js 확장 문법을 사용해 UI 정의합니다.
    8. 또한 NextJS, Astro 등과 같은 프레임워크와 호환성이 높아 다른 환경에서도 사용할 수 있습니다.

  • 가상 돔(Virtual-DOM)

    • Fibers React 16부터 사용된 개념
    • 메모리 상에 존재하는 돔 사본으로, 실제 돔과 비교하여 변경사항만 실제 돔에 적용
    • 트리와 스케줄러 알고리즘을 사용하여 렌더링을 분할하고 우선순위를 관리, 결과적으로 부드럽고 빠른 렌더링을 지원
    • Renderer
      • React가 컴포넌트를 렌더링할 때 사용, 가상 돔을 실제 돔으로 변환합니다.
    • Reconciler
      • 재조정기는 리액트가 돔의 변경을 관리하는 방식,
      • 변경사항을 비교하고 필요한 부분만 업데이트하여 효율적으로 돔을 관리합니다. 이 작업은 비동기로 이루어져 UI성능을 최적화합니다.

  • ReactDOM

    • Render는 React 요소를 지정된 루트 DOM 노드에 렌더링
      • ReactDOM.render(reactElement, reactRoot)
    • createElement : 특정 태그와 속성, 자식을 갖는 React 요소 생성

  • React.Component

    • render 메서드 : 컴포넌트의 ui 정의
    • 리액트 컴포넌트는 이 메서드를 통해 어떤 html을 렌더링할지 정의
    • life-cycle 컴포넌트는 생성, 업데이트, 소멸의 생명주기를 갖음, 각각의 단계에서 특정 메서드가 호출

  • 동시성 렌더링

    • 더 나은 성능과 사용자 경험을 제공하기 위해 도입된 방식
    • 기존의 동기식 렌더링보다 장점이 있음
    • 동시성 렌더링 방식 : React가 작업을 여러 작은 단위로 나누어 처리하고, 우선순위에 따라 작업을 재배치
    • 더 부드럽고 빠른 사용자 인터페이스 제공
    • 대량의 데이터를 더 부드럽게 렌더링
      • requestIdleCallback : 브라우저가 유휴상태일 때, 데이터를 추가로 렌더링
    • 빠른 응답성 : 긴 렌더링 작업이 있어도 사용자 입력을 신속하게 처리
    • 부드러운 렌더링 : 대량의 데이터를 점진적으로 렌더링하여 브라우저가 멈추는 현상 방지
    • 효율적인 작업 관리 : 작업을 작은 단위로 나누어 우선순위에 따라 처리함으로써 성능 최적화

  • ReactDOM.createRoot : 지정된 DOM 노드에 새로운 React root 생성

  • 동기식 렌더링방식

    • 모든 렌더링 작업이 한번에 실행, 컴포넌트의 상태가 변경되면 전체 렌더링 작업이 즉시 수행
    • 큰 렌더링 작업이 실행되는 동안 사용자 입력 이벤트가 지연되거나 무시될 수 있음, ui가 멈출 수도 있음

  • 동시성 렌더링 방식

    • 위의 단점들을 해결하기 위해 도입
    • 렌더링 작업을 작은 단위로 분할하고,

  • DOM 구조

    • HTMLElement → Element → Node → eventtarget(최상위)
    • eventtarget은 최상위 인터페이스로서, 이벤트를 받을 수 있는 모든 객체가 이것을 구현
      • addEventListener, removeEventListener, dispatchEvent
    • Node는 eventtarget을 상속받음, 문서의 모든 객체에 대한 공통속성과 메서드를 정의
      • appendchild, removeChild, cloneNode, nodeType, nodeName
    • Element는 node를 상속받아, html 또는 xml의 요소를 나타냄
      • getAttribute, setAttribute, removeAttribute, tagName, id, className
    • HTMLElement는 element를 상속받아, 모든 html 요소를 나타냄
      • focus.click, innerHTML, style, hidden
    • 이 계층구조를 통해서 DOM에 대한 자세한 동작을 확인

    image.png