[React] React로 개발할 때 코드를 최적화하는 방법

 

React로 개발하며 코드를 작성할 때 어떻게 하면 코드를 최적화하며 작성할 수 있을까? 우선 코드최적화는 왜 하는 것일까? 코드최적화를 했을 때, 앱의 기능을 효율적으로 처리하여 성능을 향상시킬 수 있고, 사용자가 앱을 사용하며 느끼는 경험의 품질을 올려줄 수 있다.

그렇기 때문에 우리는 여러가지 자원 낭비를 주의하며 코드를 작성해야한다. 

React에서 코드 최적화 하기 위한 방법은 크게 두가지가 있다 

 

1. 렌더링 최적화 하기

렌더링은 React 앱 성능에 가장 큰 영향을 미치기 때문에 렌더링 최적화는 필수이다. 

1) 불필요한 렌더링 방지하기

• 효율적인 props 구조를 설계를 하여 불필요한 리렌더링을 방지한다. 
• 메모이제이션을 사용해서 state나 props가 변경되지 않을 경우에는 리렌더링 하지 않게 한다.
• useState로 컴포넌트의 state 변경시 변경된 부분만 렌더링되게 처리한다. 

2) 컴포넌트 재사용하기

• 한번 렌더링이 됐던 컴포넌트를 재사용하기
• useMemo hook으로 컴포넌트 내에 한번 계산된 값 재사용하기

3) 리렌더링 범위 최소화 하기

• 리렌더링이 필요없는 컴포넌트를 분리해서 리렌더링 됮 않게 하기
• 컴포넌트 맵핑 시 key 값으로 index를 사용해서 렌더링 범위 줄이기

 

2. 리소스 최적화 하기

1) 리소스 크기 줄이기

• image 등 app에 사용되는 애셋 크기 최적화 하기 (tinypng 등으로 이미지 크기 줄이기)
• css 파일통합
• javascript 파일 최적화로 리소스 크기 줄이기

2) Lazy Loading 사용

• Lazy Loading으로 당장 사용하지 않는 리소스는 나중에 불러오도록 하기

3) 리소스 캐싱

• 리소스 캐싱으로 한번 로드했던 리소스를 저장해두고 다시 사용하기