1. 렌더링하고 커밋하기

컴포넌트 렌더링이 일어나는 경우는 두 가지가 있는데 컴포넌트의 첫 렌더링인 경우와 컴포넌트의 state(or 상위 요소 중 하나)가 업데이트 된 경우 입니다. 여기서의 렌더링은 React에서 컴포넌트를 호출하는 것을 의미합니다.

// DOM 노드로 createRoot를 호출한 다음 컴포넌트로 render 메서드를 호출하여 첫 렌더링 시키기

import Image from './Image.js';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'))
root.render(<Image />);

컴포넌트가 처음 렌더링 되면 set 함수로 state를 업데이트하여 추가 렌더링을 촉발시킬 수 있고, 컴포넌트의 state를 업데이트하면 자동으로 렌더링이 대기열에 추가됩니다. 예를들어 카페에서 손님이 아메리카노를 처음 주문한 이후에, 추가적으로 목이 말라 스무디나 다른 커피류를 주문하는 모습이라고 생각하시면 됩니다.

⭐ 렌더링은 항상 순수한 계산 !!

• 동일한 입력에는 동일한 출력을 해야하고 동일한 입력이 주어지면 컴포넌트는 항상 동일한 JSX를 반환해야 합니다.

• 이전의 state를 변경해서는 안되며 렌더링 전에 있던 객체나 변수를 변경해서는 안됩니다.

만약 이 원칙들을 준수하지 않을경우, 코드베이스가 복잡해지며 혼란스러운 버그와 예측 불가능한 동작이 발생할 수 있습니다. “Strict Mode”에서 개발할 때 React는 각 컴포넌트의 함수를 두 번 호출하여 순수하지 않은 함수로 인한 실수를 표면화하는데 도움을 받을 수 있습니다.

React는 렌더링 간에 차이가 있는 경우에만 DOM 노드를 변경합니다 !!

렌더링후 React는 DOM을 수정합니다. 초기 렌더링의 경우 React는 appendChild() DOM API를 사용하여 생성한 모든 DOM을 화면에 표시하며, 리렌더링의 경우 React는 필요한 최소한의 작업을 적용하여 DOM이 최신 렌더링 출력과 일치하도록 합니다.