React input delay 해결법

상황

{
    name: "",
    list: [],
}

1. 보이는 데이터가 많은 모달에서 input을 받아서 state에 저장하는 기능을 구현하고 있었다.
2. 사용자 리스트가 나오고, 체크를 하면 list 배열에 저장되는 방식이었다.
3. 사용자 리스트가 많은 경우, name을 input으로 입력받아 업데이트하는 방식에서 input delay가 발생

해결법

1. 컴포넌트 분리

<div>
    <label>
        <input value={value} onChange={onChange}/>
    </label>
    
    //사용자 체크 기능(데이터가 많음)
    ...
</div>

이렇게 name과 list 배열을 입력하는 것이 같은 컴포넌트에 있으면 컴포넌트가 계속 렌더링 되어 delay가 발생한다.

 

<div>
    <label>
        <NameInput setValue={setValue}/>
    </label>
    
    //사용자 체크 기능(데이터가 많음)
    ...
</div>

따라서 이렇게 컴포넌트를 분리하고 setValue를 넘겨줬다.

 

2. onBlur 사용하기

import { useState } from 'react';

export default function NameInput({ setValue }) {
    const [name, setName] = useState("");

    const onChangeName = (e) => {
        setName(e.target.value);
    };

    const onBlur = () => {
        setValue((prev) => ({
            ...prev,
            name: name,
        }));
    };

    return (
        <div>
            <input value={name} onChange={onChangeName} onBlur={onBlur} />
        </div>
    );
}

• onBlur은 input에 대한 focus가 해제되면 발동한다.
• 그렇기에 onChange 이벤트로 name을 업데이트 해주고, "저장"버튼 같은 것이 눌리면 자연스럽게 input focus가 해제되니까 그때 원본 데이터에 name이 최종 업데이트가 된다.

 

1번과 2번을 모두 활용하여 나는 input delay 문제를 해결했다.