React에서 렌더링이 발생하는 조건과 렌더링 성능 최적화 방법

🧐 렌더링이 발생하는 조건

1. 컴포넌트의 state가 변경되었을 때
2. 컴포넌트가 상속받은 props가 변경되었을 때
3. 부모 컴포넌트가 리렌더링이 된 경우 자식 컴포넌트는 모두 리렌더링



🧐렌더링 성능 최적화 방법

1. hook (useMemo, useCallback)
useMemo - 계산의 재실행을 방지
useCallback - 함수의 재생성을 방지


2. ContextAPI, 기타 상태 관리툴
ContextAPI - 컴포넌트 간에 값을 공유, 주로 전역적으로 필요한 값을 다룰 때 사용
- 해당 값이 필요한 컴포넌트에만 전달하여 리렌더링 시키고 다른 컴포넌트는 리렌더링 되지 않게 하기
recoil - 전역 상태를 관리하기 위한 상태 관리 라이브러리


3. windowning - 현재 화면에 보이는 항목만 렌더링 하여 성능 향상 (대표 라이브러리 : React-Virtualized)  

 

 

렌더링이란?

 

컴포넌트가 현재 props와 state의 상태에 기초해 UI를 어떻게 구성할지, 컴포넌트에게 작업을 요청하는 것을 의미한다.

 

 

React의 렌더링 과정

 

기본적인 리액트의 렌더링 개념은 루트 <div id="root"></div> DOM부터 시작해 플래그가 지정되어 있는 모든 컴포넌트를 찾아서 렌더링을 진행하는 것을 말한다.

 

 

• root id는 public/index.html에 기본적으로 설정이 되어있다.
• DOM은 HTML parser에 의해 생성된 트리 구조의 Node 객체 모델이다.

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

기본적으로 리액트의 렌더링은 이러한 DOM 엘리먼트를 ReactDOM.createRoot()에 전달한 다음, 그 React Element를 root.render()에 전달하는 과정을 거친다.

 

 

React Element

// createElement를 이용해서 React Element 만들기
// 사용하기가 어렵고, 직관적이지 않다.
// React Element는 불변객체로 작용
// 엘리먼트가 생성된 이후에는 해당 엘리먼트의 속성과 자식을 변경할 수 없다.
React.createElement(
  'div',
  { className: 'name' },
  'React'
)

// 위와 같은 의미 (JSX 문법)
<div className='name'>React</div>

// createElement를 이용해서 만들어진 React Element 객체
{
  type: 'div',
  props: {
    className: 'name',
    children: 'React'
  }
}

• 리액트 엘리먼트는 type과 props를 가지는 React만의 객체이다.
• React.creatElement()를 이용해 만들 수 있다.
• type으로 HTML 태그 이름을 가진다.
• 그 이외의 특징을 props로 관리하는 객체 형태로 정의된다.

 

 

React에서 렌더링이 발생하는 조건

 

1. 컴포넌트의 state가 변경되었을 때
2. 컴포넌트가 상속받은 props가 변경되었을 때
3. 부모 컴포넌트가 리렌더링이 된 경우 자식 컴포넌트는 모두 리렌더링

 

 

• 리액트에서 렌더링이 일어나면 UI를 다시 그려주는 작업을 실시한다.
• 리렌더링이 자주 일어나면 메모리가 소모되고 비용이 발생하게 된다.
• 불필요한 렌더링이 발생하지 않기 최적화 작업을 해야 할 필요가 있다.

 

 

렌더링 성능 최적화 방법

 

useMemo (react hook) : 계산의 재실행을 방지

 

계산 비용이 높은 연산의 결과를 메모이제이션하여 성능을 최적화하는 데 사용한다.

 

메모이제이션(Memoization)은 함수의 반환 값을 저장해 두고, 동일한 인자가 전달될 때 이전에 저장된 값을 반환하여 중복된 계산을 피하는 최적화 기법이다.

 

 

예시 : 주어진 배열의 합계를 계산하는 함수

function calculateTotal(array) {
  console.log('계산이 수행됩니다.');
  return array.reduce((acc, curr) => acc + curr, 0);
}

• 배열의 합계를 계산
• 각 호출 시에 '계산이 수행됩니다.'라는 메시지를 출력

 

 

// 이 함수를 사용하여 React 컴포넌트에서 배열의 합계를 계산하고 렌더링하는 예시

import React, { useState } from 'react';

function MyComponent({ data }) {
  const [array, setArray] = useState(data);
  const total = calculateTotal(array);

  return (
    <div>
      <p>배열의 합계: {total}</p>
      <button onClick={() => setArray([...array, Math.random() * 10])}>값 추가</button>
    </div>
  );
}

• 이 컴포넌트에서는 calculateTotal 함수를 호출하여 배열의 합계를 계산
• 배열이 변경될 때마다 calculateTotal 함수가 다시 실행되어 합계를 계산하게 됨
• 이렇게 되면 배열의 크기가 커지면 성능에 문제가 생길 수 있다.

 

 

// useMemo를 사용하여 이 문제를 해결

import React, { useState, useMemo } from 'react';

function MyComponent({ data }) {
  const [array, setArray] = useState(data);
  const total = useMemo(() => calculateTotal(array), [array]);

  return (
    <div>
      <p>배열의 합계: {total}</p>
      <button onClick={() => setArray([...array, Math.random() * 10])}>값 추가</button>
    </div>
  );
}

• useMemo 훅은 두 번째 매개변수로 전달된 종속성 배열이 변경될 때에만 메모이제이션된 값이 재계산
• 배열이 변경될 때만 calculateTotal 함수가 호출
• 이렇게 하면 불필요한 계산을 피할 수 있어 성능이 향상된다.

 

 

useCallback (react hook) : 함수의 재생성을 방지

 

콜백 함수를 메모이제이션하여 성능을 최적화하는 데 사용한다.

 

컴포넌트가 다시 렌더링 될 때마다 새로운 함수 인스턴스가 생성되는 것을 방지한다.

 

주로 자식 컴포넌트에 콜백 함수를 props로 전달할 때 사용된다.

 

 

// 예시

import React, { useState, useCallback } from 'react';

function ChildComponent({ onClick }) {
  return (
    <button onClick={onClick}>클릭</button>
  );
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // count가 변경될 때만 handleClick이 새로운 함수를 생성

  return (
    <div>
      <p>클릭 수: {count}</p>
      <ChildComponent onClick={handleClick} />
    </div>
  );
}

• handleClick 함수는 count 상태를 변경하는 콜백 함수
• 이 함수는 useCallback 훅을 사용하여 메모이제이션 됨.
• 두 번째 매개변수로 [count]를 전달함으로써, count 상태가 변경될 때마다 새로운 함수가 생성한다.
• 이렇게 하면 부모 컴포넌트가 다시 렌더링 될 때마다 새로운 함수가 생성되지 않고, 이전에 생성된 함수를 재사용하여 성능을 최적화할 수 있다.

 

 

ContextAPI

 

리액트 컴포넌트 간에 값을 공유할 수 있게 해주는 기능으로 주로 전역적으로 필요한 값을 다룰 때 사용한다.

 

리액트는 부모 컴포넌트에서 자식 컴포넌트인 하나의 단방향으로 데이터를 보내주는데 깊이가 깊거나 여러 컴포넌트에서 사용해야 한다면 복잡해질 수 있다.

 

Context API 통해 prop 전달의 복잡성을 줄이고 컴포넌트 계층 구조의 깊은 곳에서도 데이터에 쉽게 접근할 수 있다.

 

 

1. 최적화된 값 전달
   • 전역적인 상태를 관리할 때, 가능한 최소한의 값만을 context에 포함시킨다.
   • 모든 컴포넌트가 필요로 하는 값을 context에 포함시키지 않고,
   • 해당 값이 필요한 컴포넌트에만 전달한다.
     
     
     
2. 렌더링 범위 최적화
   • 실제로 해당 context 값을 필요로 하는 컴포넌트에만 해당 context를 전달하자
   • 불필요한 컴포넌트에는 전달하지 말자
     
     
     
3. 메모이제이션 사용
   • context 값을 전달하는 함수나 컴포넌트가 불필요하게 재실행되는 것을 방지하기 위해 useMemo 나 useCallback을 사용하자
   • 이를 통해 context 값이 변경되지 않는 한 해당 컴포넌트가 재렌더링되지 않도록 한다.
     
     
     
4. 컨텍스트 값의 변경 최소화
   • context 값을 변경할 때는 실제로 변경이 필요한지를 검토하고, 최소한의 변경만 수행하자.
   • 불필요한 변경은 컴포넌트 트리 전체에 영향을 미치며, 성능을 저하시킬 수 있다.
     
     
     
5. React DevTools 활용
   • React DevTools를 사용하여 컴포넌트 트리의 렌더링을 분석하자
   • 불필요한 렌더링이 발생하는 부분을 식별하자
   • 이를 통해 최적화가 필요한 부분을 파악하고 개선할 수 있다.
     
     

 

예시 : 언어 설정 값을 context에 저장하여 다국어 지원을 제공하는 경우

// LanguageContext.js

import React, { createContext, useState, useContext } from 'react';

const LanguageContext = createContext();

export const LanguageProvider = ({ children }) => {
  const [language, setLanguage] = useState('en');

  const changeLanguage = (newLanguage) => {
    setLanguage(newLanguage);
  };

  return (
    <LanguageContext.Provider value={{ language, changeLanguage }}>
      {children}
    </LanguageContext.Provider>
  );
};

export const useLanguage = () => {
  return useContext(LanguageContext);
};

• 모든 컴포넌트가 언어 설정 값을 필요로 하는 것은 아니다.
• 예를 들어, Header와 Footer 컴포넌트만 언어 설정 값을 필요로 할 수 있다.

 

 

// Header.js

import React from 'react';
import { useLanguage } from './LanguageContext';

const Header = () => {
  const { language } = useLanguage();

  return (
    <header>
      <h1>{language === 'en' ? 'Hello' : '안녕하세요'}</h1>
    </header>
  );
};

export default Header;

// Footer.js

import React from 'react';
import { useLanguage } from './LanguageContext';

const Footer = () => {
  const { language } = useLanguage();

  return (
    <footer>
      <p>{language === 'en' ? '© 2024 MyWebsite. All rights reserved.' : '© 2024 내웹사이트. 판권 소유.'}</p>
    </footer>
  );
};

export default Footer;

• 위 코드에서는 Header와 Footer 컴포넌트에서만 언어 설정 값을 필요
• 따라서 이 두 컴포넌트에만 해당 값을 전달
• 다른 컴포넌트에는 전달하지 않는다.
• 이를 통해 해당 컴포넌트만 언어 설정 값이 변경될 때 재렌더링되도록 할 수 있다.

 

 

// App.js

// App.js
import React from 'react';
import { LanguageProvider } from './LanguageContext';
import Header from './Header';
import Footer from './Footer';

const App = () => {
  return (
    <LanguageProvider>
      <div className="App">
        <Header />
        <main>
          {/* 다른 컴포넌트들 */}
        </main>
        <Footer />
      </div>
    </LanguageProvider>
  );
};

export default App;

• LanguageProvider 컴포넌트로 언어 설정 값을 제공
• Header와 Footer 컴포넌트는 LanguageProvider 컴포넌트 내에 있기 때문에 useLanguage 훅을 통해 언어 설정 값을 가져와 사용 가능
• Header와 Footer 컴포넌트만 언어 설정 값이 변경될 때 재렌더링된다.
• 다른 컴포넌트들은 영향을 받지 않는다.

 

 

useContext

함수형 컴포넌트에선 Consumer를 대신하여 useContext hook을 사용하여 현재상태를 구독할 수 있다.

context를 읽고 상태 변화를 구독하는 것만 가능하기 때문에 Provider를 사용하여 context 상태를 업데이트해줘야 한다.

const value = useContext(MyContext);

 

 

Context API의 치명적 단점

• Context API는 Provider 하위의 모든 Consumer들이 변경될 때마다 랜더링이 된다.
• 즉, Context를 사용하지 않은 컴포넌트도 리랜더링이 발생한다는 것!

 

 

Context 내용물 끌어올리기

예시 : 마우스가 움직이면 상태를 계속 업데이트

const App = () => {
  const [mousePosition, setMousePosition] = useState<[number, number]>([0, 0]);

  // 마우스 움직임을 감지하여 mousePosition 상태 계속 업데이트
  useEffect(() => {
    document.addEventListener('mousemove', (event) => {
      setMousePosition([event.clientX, event.clientY]);
    });
  }, []);

  return (
    <MouseMovementContext.Provider value={mouseMovementContextValue}>
      <Header />

      <Article title="오늘도 즐거운 하루" content="오늘 새벽에 좀 많이 추워서 그런지 아침에 힘들었어요. 일교차가 크니 조심하도록 합시다.">
        <MousePositionMeter />
      </Article>
      <Article title="냉동피자가 4천원이면 꽤 괜찮은데?" content="피자치즈 얹어먹으면 더더욱 맛있습니다. 근데 집에 피자치즈가 있어야 합니다." />
      <Article title="힘들었던 일주일이 드디어 끝" content="너무 빡센거같다. 야근도 적당히 해야지!!" />

      <Footer />
    </MouseMovementContext.Provider>
  );
};

• MouseMovementContext가 있고 마우스가 움직이면 상태를 계속 업데이트
• MouseMovementContext로부터 마우스의 위치 상태 값을 받는 컴포넌트는 MousePositionMeter 밖에 없다.

 

위 코드는 전체가 리렌더링 된다.

 

• App에서 setState를 함으로써 App에서 리렌더링이 발생
• 함수에서 또 Header, Article, Footer를 호출하여 리렌더링 된다.

 

 

// 내용 끌어올리기를 적용한 코드

const MouseMovementProvider = ({ children }: PropsWithChildren) => {
  const [mousePosition, setMousePosition] = useState<[number, number]>([0, 0]);

  // 마우스 움직임을 감지하여 mousePosition 상태 계속 업데이트
  useEffect(() => {
    document.addEventListener('mousemove', (event) => {
      setMousePosition([event.clientX, event.clientY]);
    });
  }, []);

  return (
    <MouseMovementContext.Provider value={mouseMovementContextValue}>
      {children}
    </MouseMovementContext.Provider>
  );
}

const App = () => {
  return (
    <MouseMovementProvider>
      <Header />

      <Article title="오늘도 즐거운 하루" content="오늘 새벽에 좀 많이 추워서 그런지 아침에 힘들었어요. 일교차가 크니 조심하도록 합시다.">
        <MousePositionMeter />
      </Article>
      <Article title="냉동피자가 4천원이면 꽤 괜찮은데?" content="피자치즈 얹어먹으면 더더욱 맛있습니다. 근데 집에 피자치즈가 있어야 합니다." />
      <Article title="힘들었던 일주일이 드디어 끝" content="너무 빡센거같다. 야근도 적당히 해야지!!" />

      <Footer />
    </MouseMovementProvider>
  );
};

• Header, Article, Footer를 children을 통해서 전달
• 이 컴포넌트들은 App이 렌더링 하여 MouseMovementProvider에 넘겨주기 때문에 App이 리렌더링 되지 않는 이상 Header, Article, Footer은 리렌더링 되지 않는다
• 즉 MouseMovementProvider가 계속 리렌더링 되어도 Header, Article, Footer는 리렌더링 되지 않는다.
• MousePositionMeter에서는 useContext(MouseMovementContext)를 사용하기 때문에 리렌더링이 된다.

 

 

윈도닝(Windowing)

 

대규모 목록이나 테이블과 같은 큰 데이터 세트를 가진 목록을 효율적으로 렌더링 하는 기술이다.

 

브라우저에서 한 번에 많은 항목을 렌더링 하지 않고, 현재 화면에 보이는 항목만 렌더링 하여 성능을 향상할 수 있다.

 

가장 일반적인 윈도닝 라이브러리 중 하나인 React-Virtualized가 있다.

 

 

예시 : 무한 스크롤 페이지

import React from 'react';
import { List } from 'react-virtualized';

const MyListComponent = ({ data }) => {
  const rowRenderer = ({ index, key, style }) => {
    return (
      <div key={key} style={style}>
        {data[index]}
      </div>
    );
  };

  return (
    <List
      width={300}
      height={500}
      rowCount={data.length}
      rowHeight={30}
      rowRenderer={rowRenderer}
    />
  );
};

export default MyListComponent;

• react-virtualized의 List 컴포넌트를 사용하여 가상 목록을 렌더링 한다.
• List 컴포넌트는 data 배열의 각 항목을 효율적으로 렌더링 하기 위해 rowRenderer 함수를 호출
• rowRenderer 함수는 각 항목의 인덱스에 해당하는 데이터를 렌더링 하는 역할

 

 

이제 데이터가 수백 또는 수천 개의 항목을 가진 목록이라고 가정

• 위의 코드는 사용자에게 실제로 보이는 항목만 렌더링 하여 성능이 크게 향상된다.
• 사용자가 스크롤을 할 때마다 List 컴포넌트는 현재 화면에 보이는 항목만 렌더링해 메모리와 CPU 리소스를 효율적으로 사용할 수 있다.

 

 

이것이 윈도닝을 사용한 렌더링 최적화의 핵심이다. 대규모 데이터 세트를 효율적으로 처리하여 성능을 개선하고 사용자 경험을 향상할 수 있다.