React는 현대 웹 개발에서 가장 널리 사용되는 JavaScript 라이브러리 중 하나로, 사용자 인터페이스를 구축하는 데 뛰어난 도구입니다. 그 중에서도 React의 핵심 기능 중 하나는 컴포넌트 리렌더링입니다. 컴포넌트 리렌더링은 React 애플리케이션의 성능과 효율성을 결정짓는 중요한 개념 중 하나입니다.
컴포넌트 리렌더링의 두 가지 유형
React 컴포넌트 리렌더링은 크게 두 가지 유형으로 나눌 수 있습니다.
1. 초기 렌더링 (Initial Rendering)
컴포넌트가 처음으로 화면에 나타날 때, 또는 페이지를 새로 고칠 때, 초기 렌더링이 발생합니다. 이때 React는 컴포넌트를 DOM에 새로운 엘리먼트로 렌더링하고 초기 데이터를 화면에 표시합니다.
2. 재렌더링 (Re-rendering)
초기 렌더링 이후에는 컴포넌트가 이미 화면에 렌더링된 후에 상태(State)나 속성(Props)이 변경될 때 재렌더링이 발생합니다. 이때 React는 가상 DOM(Virtual DOM)을 활용하여 변경된 부분만을 업데이트하고, 이전 가상 DOM과 비교하여 실제 DOM에 변경 사항을 반영합니다. 이로써 전체 페이지를 다시 그리는 것이 아니라 변경된 부분만 업데이트하여 성능을 최적화합니다.
재렌더링이 발생하는 경우
React 컴포넌트가 재렌더링되는 경우는 다음과 같습니다:
– 상태(State) 변경
setState 함수나 useState Hook을 사용하여 컴포넌트의 상태를 업데이트할 때, React는 해당 컴포넌트를 재렌더링합니다. 이때 변경된 상태를 바탕으로 가상 DOM을 업데이트하고 화면에 반영합니다.
– 속성(Props) 변경
부모 컴포넌트에서 전달되는 속성이 변경되면 자식 컴포넌트가 재렌더링됩니다. 이것은 React의 데이터 흐름에서 중요한 부분이며, 데이터를 효과적으로 관리하는 데 도움을 줍니다.
– Context 값 변경
React의 Context API를 사용하여 전역 데이터가 변경되면 해당 값을 사용하는 모든 컴포넌트가 재렌더링됩니다. 이를 통해 컴포넌트 간의 데이터 공유와 관리가 가능해집니다.
– Force Re-render
forceUpdate 함수를 사용하여 컴포넌트를 강제로 재렌더링할 수도 있습니다. 이것은 특별한 경우에만 사용해야하며, 주의해서 활용해야 합니다.
리액트의 재렌더링 최적화
React는 재렌더링을 최적화하기 위해 다양한 방법을 제공합니다. 예를 들어, shouldComponentUpdate 메서드를 사용하거나 함수형 컴포넌트에서 React.memo를 활용하여 렌더링을 방지할 수 있습니다. 또한, 컴포넌트의 생명주기 메서드(예: componentDidUpdate, useEffect)를 활용하여 컴포넌트가 재렌더링될 때 필요한 작업을 수행할 수 있습니다.
마무리
React 컴포넌트 리렌더링은 React 애플리케이션의 핵심 개념 중 하나이며, 이를 이해하고 효율적으로 관리하는 것은 React 애플리케이션의 성능 향상에 중요한 역할을 합니다. React의 가상 DOM을 활용하여 변경사항을 최소화하고, 재렌더링을 최적화하는 다양한 방법을 활용하면 더 나은 사용자 경험을 제공할 수 있습니다.