렌더링

React 렌더링: 깊이 있는 이해를 위한 상세 가이드

React는 현대 웹 개발에서 가장 인기 있는 자바스크립트 라이브러리 중 하나이며, 그 핵심 기능 중 하나는 렌더링입니다. 렌더링은 데이터를 바탕으로 사용자 인터페이스(UI)를 생성하는 과정을 의미하며, React는 이를 효율적이고 유연하게 처리하기 위해 독특한 방식을 채택하고 있습니다.

1. 렌더링의 기본 개념

• JSX: React는 JSX라는 문법 확장을 사용하여 UI를 구성합니다. JSX는 HTML과 비슷한 문법으로 자바스크립트 코드 안에 직접 UI를 작성할 수 있게 해줍니다.
• 컴포넌트: React 애플리케이션은 작은 독립적인 단위인 컴포넌트로 구성됩니다. 각 컴포넌트는 자신의 상태를 관리하고, props를 통해 다른 컴포넌트와 데이터를 주고받으며, UI를 렌더링합니다.
• Virtual DOM: React는 실제 DOM(Document Object Model)과 동일한 구조를 가진 가상 DOM을 메모리에 유지합니다. 데이터가 변경될 때마다 React는 가상 DOM을 업데이트하고, 실제 DOM과 비교하여 최소한의 변경만 적용합니다. 이를 통해 브라우저의 DOM 조작을 최소화하고, 렌더링 성능을 향상시킵니다.

2. React 렌더링 과정

1. JSX 코드 작성: 개발자는 JSX를 사용하여 컴포넌트를 정의하고, UI를 구성합니다.
2. 컴파일: JSX 코드는 Babel과 같은 컴파일러를 통해 일반 자바스크립트 코드로 변환됩니다.
3. 렌더링: React는 컴파일된 자바스크립트 코드를 실행하여 가상 DOM을 생성합니다.
4. Diffing: 데이터가 변경되면 React는 이전 가상 DOM과 현재 가상 DOM을 비교하여 변경된 부분만 찾아냅니다.
5. Patching: React는 Diffing 결과를 바탕으로 실제 DOM을 최소한으로 업데이트합니다.
6. 브라우저 렌더링: 업데이트된 DOM은 브라우저에 의해 화면에 표시됩니다.

3. 렌더링 최적화

• shouldComponentUpdate: 컴포넌트의 props나 state가 변경될 때마다 렌더링이 호출됩니다. shouldComponentUpdate 메서드를 오버라이딩하여 불필요한 렌더링을 방지할 수 있습니다.
• PureComponent: PureComponent는 shouldComponentUpdate를 자동으로 구현하여, props나 state가 얕은 비교(shallow comparison)에서 같으면 렌더링을 생략합니다.
• Memoization: 자주 사용되는 값이나 계산 결과를 메모이제이션하여 불필요한 재계산을 방지할 수 있습니다.
• React.memo: 함수형 컴포넌트의 메모이제이션을 위한 Hook입니다.
• useMemo, useCallback: 렌더링 최적화를 위한 Custom Hook입니다.

728x90

4. 조건부 렌더링

• 삼항 연산자: 간단한 조건부 렌더링에 사용됩니다.
• && 연산자: && 연산자를 사용하여 조건에 따라 요소를 렌더링할 수 있습니다.
• || 연산자: || 연산자를 사용하여 기본값을 설정할 수 있습니다.
• ternary expression: 복잡한 조건부 렌더링에 사용됩니다.

5. 리스트 렌더링

• map: 배열의 각 요소를 새로운 요소로 변환하여 새로운 배열을 생성합니다.
• key: 리스트의 각 아이템에 고유한 key를 부여하여 React가 아이템을 효율적으로 관리할 수 있도록 합니다.

6. 포털

• ReactDOM.createPortal: 다른 DOM 노드에 자식 컴포넌트를 렌더링할 수 있도록 합니다.

7. React Context

• Context API: 컴포넌트 트리 전체에 데이터를 전달할 수 있는 방법을 제공합니다.

8. Suspense

• Suspense: 데이터를 비동기적으로 로딩하는 동안 로딩 상태를 표시하거나, 데이터가 준비될 때까지 렌더링을 지연시킬 수 있습니다.

9. Server-Side Rendering (SSR)

• SSR: 서버에서 HTML을 생성하여 초기 페이지 로딩 속도를 향상시키는 기법입니다.

10. Static Site Generation (SSG)

• SSG: 빌드 타임에 HTML을 미리 생성하여 빠른 페이지 로딩과 SEO에 유리합니다.

결론

React 렌더링은 복잡한 웹 애플리케이션을 효율적으로 구축하는 데 필수적인 개념입니다. Virtual DOM, 컴포넌트, JSX 등 React의 핵심 기능을 이해하고, 다양한 최적화 기법을 활용하여 성능이 뛰어난 React 애플리케이션을 개발할 수 있습니다.