rendering
리액트의 렌더링 과정은 복잡하고 정교하게 설계되어 있습니다.
1. 초기 렌더링 (Mounting)
초기 렌더링은 컴포넌트가 처음으로 DOM에 삽입되는 과정입니다. 이 과정에서 리액트는 다음 단계를 거칩니다:
Constructor 호출 (클래스 컴포넌트의 경우):
컴포넌트의 생성자가 호출됩니다.
상태와 기타 초기 설정이 이루어집니다.
this.state를 초기화합니다.
getDerivedStateFromProps 호출:
새로운 props가 전달될 때 상태를 갱신할 수 있습니다.
정적 메서드로, 컴포넌트 인스턴스에 접근하지 않습니다.
Render 호출:
render 메서드가 호출되어 JSX를 반환합니다.
리액트는 이 JSX를 가상 DOM으로 변환합니다.
React Updates the DOM and refs:
리액트는 가상 DOM을 실제 DOM으로 변환하여 브라우저에 렌더링합니다.
refs가 설정됩니다.
componentDidMount 호출 (클래스 컴포넌트의 경우):
컴포넌트가 DOM에 삽입된 후 호출됩니다.
여기서 데이터 가져오기, 타이머 설정 등의 부작용을 처리할 수 있습니다.
2. 업데이트 (Updating)
컴포넌트가 새로운 props를 받거나 state가 변경될 때 업데이트 과정이 시작됩니다. 업데이트 과정은 다음 단계를 거칩니다:
getDerivedStateFromProps 호출:
새로운 props가 전달될 때 상태를 갱신할 수 있습니다.
shouldComponentUpdate 호출 (클래스 컴포넌트의 경우):
컴포넌트가 업데이트되어야 할지 결정합니다.
기본값은 true입니다.
Render 호출:
render 메서드가 다시 호출되어 새로운 JSX를 반환합니다.
리액트는 이 JSX를 가상 DOM으로 변환합니다.
getSnapshotBeforeUpdate 호출 (클래스 컴포넌트의 경우):
DOM이 실제로 업데이트되기 전에 호출됩니다.
여기서 스크롤 위치와 같은 현재 DOM 상태를 캡처할 수 있습니다.
React Updates the DOM and refs:
리액트는 변경된 가상 DOM을 실제 DOM에 반영합니다.
refs가 업데이트됩니다.
componentDidUpdate 호출 (클래스 컴포넌트의 경우):
업데이트가 완료된 후 호출됩니다.
여기서 DOM을 조작하거나 부작용을 처리할 수 있습니다.
3. 언마운트 (Unmounting)
컴포넌트가 DOM에서 제거될 때 언마운트 과정이 시작됩니다. 이 과정은 다음 단계를 거칩니다:
componentWillUnmount 호출 (클래스 컴포넌트의 경우):
컴포넌트가 DOM에서 제거되기 직전에 호출됩니다.
여기서 타이머를 정리하거나 구독을 취소하는 등 정리 작업을 수행할 수 있습니다.
4. 에러 처리 (Error Handling)
컴포넌트에서 오류가 발생할 때 리액트는 에러 경계 컴포넌트를 통해 에러를 처리할 수 있습니다. 에러 경계 컴포넌트는 다음 메서드를 구현할 수 있습니다:
static getDerivedStateFromError:
에러가 발생하면 호출됩니다.
상태를 업데이트하여 에러 메시지를 표시할 수 있습니다.
componentDidCatch:
에러가 발생하면 호출됩니다.
여기서 에러 로깅을 하거나 추가 작업을 수행할 수 있습니다.
5. 함수형 컴포넌트와 훅
함수형 컴포넌트는 훅을 사용하여 상태와 생명주기 이벤트를 처리합니다. 주요 훅은 다음과 같습니다:
useState:
상태를 선언하고 업데이트하는 데 사용됩니다.
상태가 변경되면 컴포넌트가 다시 렌더링됩니다.
useEffect:
사이드이펙트를 처리하는 데 사용됩니다.
초기 렌더링과 이후의 모든 업데이트 후에 호출됩니다.
두 번째 인수로 의존성 배열을 전달하여 특정 값이 변경될 때만 호출할 수 있습니다.
useRef:
DOM 요소나 클래스 컴포넌트 인스턴스에 접근할 수 있습니다.
useMemo:
값의 재계산을 피하기 위해 메모이제이션된 값을 반환합니다.
두 번째 인수로 의존성 배열을 전달하여 특정 값이 변경될 때만 재계산됩니다.
useCallback:
콜백 함수를 메모이제이션합니다.
두 번째 인수로 의존성 배열을 전달하여 특정 값이 변경될 때만 새로운 콜백을 생성합니다.
리액트 렌더링 순서 요약
초기 렌더링 (Mounting):
Constructor -> getDerivedStateFromProps -> Render -> React Updates the DOM and refs -> componentDidMount
업데이트 (Updating):
getDerivedStateFromProps -> shouldComponentUpdate -> Render -> getSnapshotBeforeUpdate -> React Updates the DOM and refs -> componentDidUpdate
언마운트 (Unmounting):
componentWillUnmount
에러 처리 (Error Handling):
getDerivedStateFromError -> componentDidCatch
훅 (Hooks):
useState, useEffect, useRef, useMemo, useCallback
리액트는 이러한 생명주기 메서드와 훅을 통해 컴포넌트의 상태와 부작용을 관리하며, 최적의 성능을 위해 가상 DOM을 사용해 최소한의 DOM 업데이트를 수행합니다.