렌더링이란

렌더링이란

React에서 렌더링(rendering)은 컴포넌트가 UI를 화면에 그리는 과정을 의미한다. React는 변경된 상태에 따라UI를 효율적으로 업데이트하는 라이브러리로, 렌더링 과정은 react의 핵심 기능 중 하나이다.

렌더링의 기본 개념

1. 초기 렌더링(Initial Rendering):

   • React 컴포넌트가 청므으로 DOM에 렌더링될 때 발생한다.
   • 컴포넌트가 마운트되면서 render 메서드(함수형 컴포넌트에서는 return 문)가 호출되고, JSX를 사용해 정의된 UI가 실제 DOM으로 변환된다.

2. 재렌더링(Re-rendering):

   • 컴포넌트의 상태(state), props, 또는 컨텍스트(context)가 변경될 때 발생한다.
   • React는 변경된 상태를 감지하고, 해당 컴포넌트와 자식 컴포넌트들을 다시 렌더링한다. 이 과정에서 React는 효율성을 위해 Virtual DOM을 사용한다.

Virtual DOM과 렌더링

• Virtual DOM:
  • Virtual DOM은 실제 DOM의 가벼운 복사본으로, React는 UI를 업데이트할 때 이 가상의 DOM에서 변화가 일어나는 부분을 계산한다.
  • 상태나 props가 변경되면 React는 새로운 Virtual DOM을 생성하고, 이전 Virtual DOM과 비교하여 차이점(변경사항)을 찾는다. 이 과정을 "diffing"이라고 한다.
  • 변경된 부분만 실제 DOM에 적용하여, 전체 DOM을 다시 렌더링하지 않고도 UI를 효율적으로 업데이트할 수 있다.

렌더링의 과정

1. 컴포넌트 호출:
   • React는 함수형 컴포넌트를 호출하거나 클래스형 컴포넌트의 render 메서드를 호출한다.
2. JSX 변환:
   • 컴포넌트는 JSX를 반환한다. JSX는 JavaScript 객체로 변환되며, 이 객체는 Virtual DOM을 구성한다.
3. Virtual DOM 생성 및 비교:
   • 새로운 Virtual DOM이 생성되고, 이전 Virtual DOM과 비교하여 차이점이 계산된다.
4. 실제 DOM 업데이트:
   • React는 변경된 부분만 실제 DOM에 반영한다.

최적화: 불필요한 재렌더링 방지

React는 기본적으로 상태나 props가 변경되면 컴포넌트를 재렌더링하지만, 불필요한 재렌더링을 방지하기 위해 몇 가지 최적화기법을 제공한다.
1. shouldComponentUpdate (클래스형 컴포넌트):

• 클래스형 컴포넌트에서 컴포넌트가 다시 렌더링될지 여부를 결정하는 메서드이다. 특정 조건에서만 컴포넌트를 다시 렌더링하도록 설정할 수 있다.

2 React.memo (함수형 컴포넌트):

• React.memo는 컴포넌트를 감싸는 고차 컴포넌트(HOC)로, 이전과 다음 props를 비교하여 변경이 없으면 렌더링을 건너뛴다.

const MyComponent = React.memo(function MyComponent(props) {
  // 컴포넌트 내용
});

3 useCallback 및 useMemo:

• useCallback: 함수형 컴포넌트에서 함수를 메모이제이션하여, 의존성 배열이 변경되지 않으면 함수가 재생성되지 않도록 한다.
• useMemo: 복잡한 계산의 결과를 메모이제이션하여, 의존성 배열이 변경되지 않으면 재계산을 피한다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

4 key 속성:

• 리스트 렌더링에서 key 속성은 React가 어떤 항목이 변경되었는지, 추가되었는지, 또는 제거되었는지를 식별하는 데 사용된다.
• 고유한 key를 제공하면 React가 요소를 효율적으로 업데이트할 수 있다.

결론

React의 렌더링은 컴포넌트가 UI를 그리는 과정으로, Virtual DOM을 활용하여 효율적으로 수행된다. 상태와 props가 변경될 때 자동으로 UI를 업데이트하지만, 불필요한 재렌더링을 방지하기 위한 최적화 기법을 제공하여 성능을 향상시킬 수 있다.