프로젝트를 진행하며 웹 성능 향상을 위한 최적화에 대한 중요성을 많이 느끼게 되었고 그에 따라서 몇가지 성능 향상 방법에 대해서 포스팅합니다.

 
 
 

## 🛠 리렌더링 성능 향상
react를 사용하여 SPA를 개발한다면 화면의 변화를 새로고침 없이 나타내기 위해 리렌더링을 하게됩니다. 
리렌더링은 SPA 개발에 있어 가장 중요한 요소중 하나인 것이고 아래와 같은 상황에 발생하게 됩니다.
 
**리렌더링 발생 조건**
* 자신의 state가 변경될 때
* 부모에게 전달받은 props가 변경될 때
* 부모 컴포넌트가 리렌더링 될 때
* 리렌더링 시키는 함수를 실행했을 때

 

대부분 위의 조건들을 고려하며 개발을 진행하지만 간혹 예상치 못한 리렌더링을 마주할 수 있습니다.
특히나 반복되고 복잡한 컴포넌트일수록 리렌더링에 대한 처리를 하지 않는다면 웹 성능은 매우 나빠질 수 있습니다.

 
 

**React.memo를 사용한 컴포넌트 최적화**
반복되는 컴포넌트는 React.memo를 사용하여 쉽게 리렌더링을 방지할 수 있습니다.
컴포넌트를 React.memo로 래핑하면 컴퍼넌트를 처음 렌더링할 때 결과를 메모이징(Memoizing)하고 다음 렌더링이 일어날 때 props의 변화가 없으면 메모이징된 내용을 재사용하기 때문에 리렌더링이 발생하지 않습니다.

 

간단한 예시로 1000개의 데이터를 표현하는 웹사이트를 만들어보겠습니다.

 

>Item.jsx
```jsx
const Item = ({ data }) => {
 return <li>{data} 데이터</li>;
};

export default Item;
```
데이터를 나타내기 위한 Item 컴포넌트입니다.

 
>App.jsx
```jsx
import { useState } from "react";
import Item from "./components/Item";

// 1000개의 데이터 생성
const createDatas = () => {
 const datas = [];

 for (let i = 1; i <= 1000; i++) {
 datas.push(i);
 }

 return datas;
};

const App = () => {
 const [dataList, setDataList] = useState(createDatas);
 const addData = () => {
 const lastData = dataList[dataList.length - 1];
 setDataList((prev) => [...prev, lastData + 1]);
 };

 return (
 <div>
 <ul>
 {dataList.map((data, idx) => (
 <Item key={idx} data={data} />
 ))}
 </ul>
 <button onClick={addData}>데이터 추가</button>
 </div>
 );
};

export default App;
```
1000개의 데이터가 있는 dataList의 데이터를 Item 컴포넌트를 활용해 렌더링합니다. 그리고 데이터 추가 버튼을 누르게 되면 기존의 dataList에 새로운 데이터를 하나 추가하게 됩니다.
 
이때 데이터 추가 버튼을 누른다면 어떻게 될까요?
기존의 dataList에 데이터가 하나 추가 되고 1001번 째 데이터가 화면에 나타날까요?

 

1001번 째 데이터가 화면에 나타나지만 기존의 1000개의 Itme 컴포넌트 또한 리렌더링 될 것입니다.
새로운 데이터가 추가되었을 뿐 기존 데이터의 변화가 하나도 없는 상황인데 말이죠.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/f7ab8301-4c94-471f-26f2-3b4cc6c0cd00/public)

[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)의 Profiler를 이용해 확인한 렌더링 정보입니다.
데이터 추가 버튼을 한번 눌렀을 때 발생한 렌더링입니다. 조그마한 청록색 블럭이 모두 Item의 렌더링 정보입니다.
 
데이터를 하나 추가한 것 뿐인데 저렇게 많은 렌더링이 발생했고 렌더링 시간은 26.6ms 걸렸습니다.
Item 컴포넌트는 텍스트로만 이루어져있고 data도 숫자 데이터기 때문에 큰 체감은 되지 않지만 만약 스타일링 되어있고 복잡한 컴포넌트라면 성능이 상당히 저하되었을 것입니다.

 

이번에는 반복되는 Item 컴포넌트를 React.memo를 사용해 래핑하고 렌더링 결과를 확인하겠습니다.

 

>Item.jsx
```jsx
import React from "react";

const Item = ({ data }) => {
 return <li>{data} 데이터</li>;
};

export default React.memo(Item); // React.memo로 래핑
```

 

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/b6e7477b-3c46-4aaa-6a07-fc80d7ccd100/public)

기존 Item 컴포넌트들은 렌더링하지 않고 새로 추가된 데이터를 보여주는 마지막 Item 컴포넌트만 렌더링하는 것을 확인할 수 있습니다.
그리고 렌더링 시간 역시 5.3ms로 상당히 단축된 것을 확인할 수 있습니다.

 

이처럼 React.memo를 사용한다면 불필요한 리렌더링을 방지할 수 있습니다. 하지만 React.memo 역시 props의 변화를 확인하기 위해 메모리를 사용하기 때문에 리렌더링이 일어나지 않거나 리렌더링 발생이 적은 컴포넌트에는 React.memo를 사용하지 않는 것이 더 좋습니다.

 
 

**useCallBack, useMemo**
함수와 특정 값을 메모이제이션 하기 위해서는 useCallBack, useMemo를 사용합니다.
 
>useCallback
```jsx
const memoizedCallback = useCallback(
 () => {
 doSomething(a, b);
 },
 [a, b],
);
```

useCallback을 사용하기 위해서는 첫 인자에 함수를 넣고 두 번째 인자에 배열로 dependencies를 넣어줍니다.
dependencies의 값이 변하지 않는 한 memoizedCallback 함수는 항상 메모이제이션된 함수를 반환합니다.

 

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

useMemo 역시 첫번 째 인자에 함수를 두번 째 인자에 dependencies를 넣어줍니다. useCallback과 다른 점이라면 함수가 아닌 값을 메모이제이션한다는 것입니다.
dependencies의 값이 변하지 않는 한 memoizedCallback 함수는 항상 메모이제이션된 값을 반환합니다.

 

useCallBack, useMemo 모두 불필요한 리렌더링을 방지하기 위해 자식 컴포넌트에게 함수나 값을 전달 할 때 사용하면 좋지만 모든 함수나 값에 남발해서 사용한다면 메모리 사용을 늘리게 되니 필요성이 느껴질 때만 사용하는게 좋습니다.

 
 
 

## 🧐 렌더링 요소 줄이기
화면에 나타나는 정보를 줄이는 것이 가장 간단하게 웹 성능을 향상시킬 수 있는 방법입니다.

 
100개의 데이터가 있다고 모든 데이터를 가져와서 웹에서 보여주는 것은 좋지 않은 방법입니다.
100개의 데이터를 가져와도 사용자가 보는 것은 그중 일부일 것이기 때문에 그 외의 데이터 호출과 렌더링은 사용자에게도 불필요하고 웹 성능도 악화시킵니다.
이러한 경우에는 10개의 데이터를 10번에 거쳐서 가져오면 좋지 않을까요?

 

**페이지네이션과 무한 스크롤**
위와 같은 상황에 사용하면 좋은 방법이 페이지네이션과 인피니티 스크롤입니다.
 
페이지네이션은 데이터를 여러 페이지에 나누어 보여주는 방식으로 많은 웹사이트에서 사용중인 방식입니다.
블로그에서는 포스트 목록을 페이지네이션 처리하여 데이터를 불러옵니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/67ca9685-a2ee-44de-0877-e2c7d0232b00/public)

 

무한 스크롤은 사용자가 웹 사이트의 스크롤의 최하단에 도착했을 때 다음 데이터를 불러오는 방식으로 sns나 이미지 컨텐츠 웹사이트에서 많이 사용하는 방식입니다.
블로그의 갤러리에서도 무한 스크롤 처리하여 이미지 데이터를 불러옵니다.

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/90091310-c2c3-406a-dd1f-4cc04f50ca00/public)

 
 

스크롤로 보여주는 컴포넌트에 한번에 가져오는 데이터가 목록이 많다면 [react-virtualized](https://github.com/bvaughn/react-virtualized)와 같은 라이브러리를 사용할 수 있습니다.
 
해당 라이브러리를 사용하면 화면에 보여지는 정보들만 렌더링하기 때문에 낭비되는 자원들을 절약할 수 있습니다.

 
 
 


## ✨ Lighthouse 활용하기
크롬 브라우저의 개발자 도구를 확인해보면 Lighthouse 라는 탭이 있습니다.
Lighthouse는 구글에서 개발한 웹 페이지 성능 향상을 위한 도구로 Lighthouse를 사용해 웹페이지를 분석한다면 웹 성능, 접근성, 검색엔진 최적화 등 다양한 정보를 분석하여 점수로 표시해주고 웹페이지의 문제를 진단하고 수정 방법도 제시해줍니다.

![image.png](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/21c9d682-69ba-4f99-cc08-2b2a717f4300/public)

Lighthouse를 잘 활용한다면 불필요하거나 사용되지 않는 javascript를 줄여 성능을 향상 시킬 수 있으며 Lighthouse에서 진단한 결과 점수 값이 높다면 검색 엔진 최적화에도 유리하기 때문에 90점 이상을 유지하는 것이 좋습니다.

프로젝트를 진행하며 웹 성능 향상을 위한 최적화에 대한 중요성을 많이 느끼게 되었고 그에 따라서 몇가지 성능 향상 방법에 대해서 포스팅합니다.

 
 
 

## 🛠 리렌더링 성능 향상
react

React 환경에서 웹 성능 향상시키기