제어 컴포넌트 최적화 방법 3가지 (+ 비제어 컴포넌트와 비교)
폼 데이터를 관리하다가 제어 컴포넌트와 비제어 컴포넌트에 대해 공부해보게되었다.
📌 제어 컴포넌트와 비제어 컴포넌트
제어 컴포넌트
리액트 상태에 의해 값이 제어되는 컴포넌트이다.
사용자 입력값으로 자신의 상태를 관리하고 업데이트하고, 상태가 업데이트 될 때마다 컴포넌트는 리렌더링된다.
폼 데이터가 상태에 저장되어 있어 데이터의 흐름이 명확하고, 로직 구현도 수월하지만, 빈번한 리렌더링으로 인해 불필요한 api 호출 등 자원 낭비가 발생할 수 있다.
import React, { useState } from 'react';
function ControlledComponent() {
const [inputValue, setInputValue] = useState('');
const handleChange = (event) => {
setInputValue(event.target.value);
};
return (
<form>
<input type="text" value={inputValue} onChange={handleChange} />
</form>
);
}
비제어 컴포넌트
입력 요소 자체가 값을 제어하며 리액트와 독립적으로 동작하는 컴포넌트이다. 입력값이 DOM 요소에 저장되기 때문에 DOM에서 이루어지는 컴포넌트라고 할 수 있다.
입력값을 가져오고 싶은 경우, ref를 사용하여 입력 값에 접근하고 제어한다.
사용자 입력에 따라 상태가 변경되지 않기 때문에 이벤트마다 리렌더링은 발생하지 않으나 폼 데이터 변경 추적이 어렵다는 단점이 있다.
import React, { useRef } from 'react';
function UncontrolledComponent() {
const inputRef = useRef(null);
const handleSubmit = (event) => {
event.preventDefault();
console.log('Submitted value:', inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input type="text" ref={inputRef} />
<button type="submit">Submit</button>
</form>
);
}
❓ 각각 언제 사용되는가?
제어 컴포넌트는 데이터 흐름이 예측 가능하고 관리하기 쉬워 복잡한 폼이나 유효성이 필요한 경우에 적합하고, 비제어 컴포넌트는 간단한 입력 폼이나 초기값 설정이 중요한 경우에 성능면에서 제어 컴포넌트보다 유리할 수 있다.
하지만 제어 컴포넌트 최적화가 가능하다면?
📌 제어 컴포넌트 최적화 방법
여러 방법의 제어 컴포넌트 최적화로 성능을 개선시킬 수 있다.
1. 쓰로틀링, 디바운싱
가장 흔하게 사용되는 제어 컴포넌트 최적화 방법으로, 불필요한 연속 호출을 줄이는 데 효과적이다.
우선, 쓰로틀링은 이벤트 호출이 반복될 때 일정한 시간 간격동안 특정함수를 한번만 실행되도록 제어하는 방법이다.
function throttle(func, delay) {
let lastCall = 0;
return function(...args) {
const now = new Date().getTime();
if (now - lastCall < delay) return;
lastCall = now;
return func(...args);
};
}
디바운싱은 연속적으로 발생하는 이벤트 중에서 마지막 이벤트만 처리하도록 하는 방법이다.
function debounce(func, delay) {
let debounceTimer;
return function(...args) {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => func(...args), delay);
};
}
2. 트라이 자료구조
문자열 검색을 위한 트리형태의 자료구조로, 문자열 탐색 및 자동 완성 기능 구현에 유용하다. 공통적인 접두사를 공유하는 문자열들을 효율적으로 저장하고 검색하여 성능을 개선시킨다.
3. useDeferedValue
일부 상태 업데이트를 지연시켜 UI 성능을 개선할 수 있는 리액트 훅이다.
우선순위가 낮은 상태 업데이트를 뒤로 미뤄 중요한 작업부터 업데이트를 진행시킬 수 있다.
import { useDeferredValue } from 'react';
function MyComponent({ value }) {
const deferredValue = useDeferredValue(value);
return (
<div>
<p>Immediate value: {value}</p>
<p>Deferred value: {deferredValue}</p>
</div>
);
}
4. useTransition : UI를 차단하지 않고 상태를 업데이트
UI를 차단하지 않으면서 비동기적으로 상태 업데이트를 시킬 수 있는 리액트 훅이다.
중요하지 않은 상태 업데이트는 중요한 작업이 끝난 후 반영되기 때문에 UI가 부드럽게 동작할 수 있다.
아래의 예시는 사용자 입력 시 호출되는 handleChange 함수 내부의 setValue가 트랜지션으로 처리되는 과정이다. 이를 통해 value는 비동기적으로 업데이트 된다.
import { useTransition, useState } from 'react';
function MyComponent() {
const [isPending, startTransition] = useTransition();
const [value, setValue] = useState('');
const handleChange = (e) => {
startTransition(() => {
setValue(e.target.value);
});
};
return (
<div>
<input type="text" onChange={handleChange} />
{isPending ? <p>Loading...</p> : <p>{value}</p>}
</div>
);
}