[동아리 소개 페이지 만들기] 6. 성능개선

1. 문제점

이미 구현은 끝났지만 페이지의 렌더링 속도가 약 5초정도 나와서 성능개선이 필요해 보였다. 회의 결과 성능 웹페이지의 성능 개선은 두 가지 부분에서 가능할 것 같았다.

첫 번째 문제점

이미지 파일들이 조금 무거워서 렌더링 시간의 대부분을 차지하는 것이었다. 특히 슬라이드의 이미지들이 많은 페이지들이 문제였다. 한 친구가 이미지 렌더링 부분을 맡기로 했다.

두 번째 문제점

은 지원서의 form부분에 textarea와 input 태그들이 useState를 통해 onChange 이벤트가 발생할 때마다 값이 리렌더링되고 있어서 불필요한 렌더링이 일어난다.

이렇게 useState로 상태를 관리하는 것을 제어 컴포넌트라고 한다.

 

2. 성능 개선 사항들

이미지 렌더링 속도 개선

먼저 jpg, png에서 웹피 형식으로 바꾸어 주어 이미지 파일의 크기를 줄였다.

또한 이미지의 렌더링 순서를 바꾸어 주었다. Chrome 75의 Native Lazy Loading 방식을 적용하였다.

CSS의 속성 중  loading="lazy" 을 이용하면 해당 태그가 viewport에 올라갈 때 src를 로딩하게 된다.

메인 화면의 배경 이미지를 먼저 렌더링시키고 화면 스클롤이 일어날 때 다른 이미지가 렌더링되게하였다.

이미지 랜더링 개선 결과 124ms만에 메인 화면이 렌더링되고 필요할 다른 이미지들은 viewport에 보여질 때 순차적으로 렌더링되는 것을 확인할 수 있다. 

따라서 4~5초나 걸리던 페이지 렌더링 시간이 0.1초 수준으로 줄어든 것을 확인할 수 있다.

입력 데이터를 비제어 컴포넌트로 관리하기

useRef Hook를 사용하면 불필요한 렌더링을 막고 필요할 때에만 값에 접근할 수 있다.

textarea와 input 태그들의 값들을 useState대신 useRef hook으로 바꾸어 주었다.

기존의 제어 컴포넌트로 관리할 때에는 onChange이벤트가 발생할 때마다  해당 값이 다시 렌더링되었다면 

성능개선 후 비제어 컴포넌트로 관리하면 "제출하기" 버튼에서 submit이벤트가 발생할 때 한 번 handleSubmit의 callback함수에서 Ref이름.current.value를 통해 값에 한 번 접근한다.

 

 

3. 문제 해결 과정에서 배운 것들

웹페이지에서 이미지 렌더링 성능 최적화

Chrome 75는 자체적으로 Native Lazy Loading을 지원한다. 즉 크롬 자체적으로 충분히 이미지 랜더링 속도를 개선할 수 있다.

https://dmdwn3979.tistory.com/10

[이미지 렌더링: 02] 웹 성능과 이미지 최적화

 

useState와 useRef

React의 폼을 다룰 때에는 크게 제어 컴포넌트와 비제어 컴포넌트가 있다.  useState를 사용하느냐  useRef를 사용하느냐의 문제로도 볼 수 있다. 두 가지 경우의 특징을 정리하면 다음과 같다.

[제어 컴포넌트가 유용한 경우]

• 실시간으로 값을 렌더링하여 화면에 보여줘야 하는 경우
• 조건에 따라 값이 바뀌는 경우
• 유효성 검사(전화번호, 이메일 형식 등)

[비제어 컴포넌트가 유용한 경우]

• form의 데이터가 많아서 매번 불필요하게 리렌더링이 일어나는 경우
• 매번 렌더링할 필요 없이 제출 시에만 API호출이 필요한 경우

결론적으로 전화 번호의 입력 시 자동 '-' 추가 기능, 등은 실시간으로 랜더링되어 변경된 값을 가져와야 하기 때문에 useState가 효율적이지만 제출시에만 값에 접근할 때에는 useRef가 효과적이다. 두 가지 모두 장단점이 있어서 알맞게 사용하면 될 것 같다.

https://ko.legacy.reactjs.org/docs/refs-and-the-dom.html

Ref와 DOM – React

https://wondrous-developer.tistory.com/199

[React] (hook) useState vs useRef

 

4. 느낀 점

드디어 거의 모든 과정이 끝났다. 단기간에 너무 많은 것을 구현하고 머리에 넣어서 머리가 복잡하다. 블로그에 정리해서 자유자제로 쓸 수 있도록 만들고 동작 원리에 대해서도 익혀야 겠다. 공부는 끝이 없다...