대기 및 날씨 데이터 시각화 시 리액트 렌더링 성능 최적화 방안: 실시간 데이터 처리에서의 로딩 속도 개선을 위한 실험적 접근

[mepwj]

주제 선정 배경

현재 진행 중인 "숨쉬는 다람쥐" 일명 "숨다" 서비스를 MVP 개발까지 진행하였습니다. MVP 개발 된 기능 중 주요 기능인 현재 위치나 선택된 지역의 '날씨' 와 '대기 오염' 정보를 조회하는 페이지입니다. 개발 초기 단계에서는 목업 데이터를 사용해 로딩 속도가 빨랐지만, 실제로 구현된 벡엔드 서버와 연결하면서 실제 데이터를 요청하고 응답을 시각화 하는 과정에서 시간이 더 증가했습니다. 이를 개선하기 위해서 어떤 방법이 있는 지, 어떻게 해야 좀 더 빠르게 사용자가에 보여질 수 있는 지를 연구해보고 싶습니다.

리액트에서 로딩이란?

먼저, 리액트에서 로딩이라는 게 무엇인지 개념을 정의하고 진행하는 게 좋을 거 같아서 로딩을 정의하고자 한다.
Loading 이라는 영단어를 검색하면 단어 사전으로 뜻을 찾아보았다. Load 와 ing 의 합쳐서 Loading 이 되었으니 Load 의 뜻을 살펴보았다.

여러 뜻 중에 싣다[태우다/적재하다], (짐이) 실리다[적재되다] 가 눈에 띈다. 즉, Loading 은 "어딘가" 에 "무언가" 를 적재, 싣는 것이라고 할 수 있다. 이를 리액트, 내 상황에 접목 시키면 이렇게 이야기 할 수 있지 않을까?
[ "날씨" 와 "대기 오염" 데이터 ] 를 [ 화면 ] 에 싣는 것 이라고.
리액트 공식 문서에서 사용되는 단어를 사용해서 "리액트" 환경에서 로딩은 컴포넌트의 상태(state) 나 props 가 화면에 그려지면서 발생하는 과정이라고 한다. 그럼 API 로 부터 데이터를 가져오거나 가져온 데이터를 표시하는 과정에서 로딩이 발생하고, 빠르게 사용자에게 보여주기 위해서 이 로딩을 빠르게 속도를 개선하는 과정이다.

리액트의 주요 개념 정리

리액트에서 랜더링, 즉 로딩을 최적화하기 위해서 로딩과 관련된 필요한 개념들을 Wiki 와 React Docs 를 보고 정리해야한다.
알아야 할 최소의 개념은

• 컴포넌트
• 상태
• 렌더링
• 컴포넌트 마운트 & 언마운드
• 데이터 패치
• 리액트 생명 주기

이 정도로 정리할 수 있을 거 같다. 그럼 순서대로 개념을 간단하게 정리해보자.

1. 리액트 컴포넌트

   • 리액트를 구성하는 최소 단위로, 함수형 컴포넌트와 클래스형 컴포넌트로 2가지 종류가 존재한다.
   • 함수형 컴포넌트는 간결하고 코드 작성이 쉬우며, 클래스형 컴포넌트는 상태와 라이프사이클을 보다 명시적으로 관리 할 수 있다고 공식 문서에 나와있다.

2. 리액트 상태 (State)

   • 컴포넌트의 상태는 동적인 변화를 관리한다고 정의 되어 있는데 쉽게 말해서 리액트에서 사용하는 "변수" 라고 이해하면 될 거 같다. 기존에 우리가 알고 있는 변수와 다른 점은 이 "상태" 변화되면 화면을 다시 그린다는 점이라고 할 수 있다.
   • 어떻게 다시 그리는 가는 useState와 같은 훅을 사용하여 상태를 정의하고, 상태가 변화하면 useState 는 화면을 다시 그린다.

3. 렌더링

   • 렌더링의 개념을 정의하기 위해서 웹 페이지가 어떻게 우리에게 보여지는 지 간략하게 정리하자
   • 간단히 설명하자면, 텍스트로 된 파일을 브라우저가 화면에 그리는 과정을 렌더링이라고 한다.
   • 리액트는 기존 DOM 이라는 것을 조작하여 이벤트를 처리하는 게 아닌 가상 DOM 이라는 것을 사용하여 변경된 부분만 업데이트 한다.

4. 컴포넌트 마운트 및 언마운트

   • 마운트와 언마운트는 주로 리액트 생명주기와 연관되어 있는 단어이다
   • 마운트는 컴포넌트가 화면에 처음 렌더링되는 과정을 의미한다. 렌더링에서 이야기한 DOM 에 추가되는 과정인 것이다.
   • 반대로 언마운트는 화면에 이미 렌더링된 컴포넌트가 DOM 에서 없애는 것을 의미한다. 사용하지 않는 컴포넌트나 화면에서 없애고 싶어하는 컴포넌트를 언마운트한다.

5. 데이터 패칭 (Fetching Data)

   • 리액트에서 API(서버)로부터 데이터를 가져오고 화면에 표시하는 방법이다
   • 필요할 때 적절한 만큼만 요청하는 것이 최적화에 가장 직결 되어 있는 요소이다.

6. 리액트 생명주기 (Lifecycle)

   • 리액트에서 생명 주기는 컴포넌트가 생성되고 변경되고 없어지는 과정이다.
   • 리액트 Docs 를 참고하면 크게 3가지 단계로 나눠진다는 것을 확인할 수 있다.
     1. 마운팅 : 컴포넌트가 DOM 에 삽입되는 단계, 삽입 되면 JSX
     2. 업데이트 : 컴포넌트가 변경되는 과정, 이 과정에서 다시 화면에 그리는 과정인 렌더링이 포함된다.
     3. 언마운팅 : 화면에 필요없는 컴포넌트를 없애고 화면을 다시 그린다.
   • 함수형 컴포넌트에서는 useEffect로, 클래스형 컴포넌트에서는 생명 주기 메서드로 관리한다. 때문에 함수형 컴포넌트를 사용하면 생명 주기 메소드를 일일히 지정해주지 않아도 되기에 함수형 컴포넌트를 자주 사용한다. 생명 주기 메소드를 일일히 호출하지 않아도 되기에 코드가 줄어들고, 가독성이 늘기에 함수형 컴포넌트가 많은 개발자가 사용한다.

===========================================================================================