리액트의 렌더링이란

리액트에서 렌더링이란

• 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업

• 실제 DOM을 사용하는 게 아닌 가상 돔을 사용하여 브라우저의 DOM과 상호작용한다. 또한, 컴포넌트의 상태나 속성이 변경될 때마다 가상 돔이 업데이트되는 걸 볼 수 있다.

• React 경우 UI을 선언하고 render 함수를 호출하면 React가 자동으로 렌더링을 수행해 화면에 출력한다. ==> 직접적으로 DOM(명령형 프로그래밍)을 사용할 필요가 없다.

트리거(trigger)

: 렌더링 및 리렌더링이 발생하는 경우를 말한다.

• 첫 렌더링은 리액트 앱을 실행했을 때 자동으로 발생
• 리렌더링: 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때 발생
  • 컴포넌트 내부 state가 변경되었을 때
  • 컴포넌트에 새로운 props가 들어올 때
    
    
    
    
    

브라우저 렌더링

• 브라우저의 렌더링과 리액트의 렌더링은 엄연히 다른 독립적인 프로세스다.
  👋👋브라우저 렌더링 관련 자료 정리👋