프로젝트를 진행하다보면 상당히 많은 input을 받게 되는데 매번
"동적 input을 쓰는게 맞는건가? 성능에는 문제가 없는가?"
하는 딜레마에 빠지곤 한다.

A Simple Component

이번 프로젝트에서는 Inputs Component에서 Create와 Update를할 수 있게 로직을 짰다.
Data는 Object형태로 오며, 부모 Component에서 name을 전달한다.

TYPESCRIPT
1const data = { id: "1234", name: "Roxie" };

기존에 어떤 데이터를 담고 있는지 알지 못하기 때문에 useEffect()에서 깊은 복사를 해준다.

TYPESCRIPT
1import React, { useEffect, ChangeEvent } from "react";
2import { InputText } from "primereact/inputtext";
3
4type Props = {
5  name: string;
6  data: DataObjectType;
7};
8
9export const Inputs: React.FC<Props> = ({ name, data }) => {
10  const { inputs, setInputs } = useDataUpdate();
11
12  useEffect(() => {
13    // db에서 받아온 데이터가 있으면 받아온 데이터로 업데이트.
14    if (Object.keys(data).length > 0) {
15      setInputs((prev) => ({
16        ...prev,
17        [name]: data[name],
18      }));
19    }
20  }, [name]);
21
22  const onChange = (e: ChangeEvent<HTMLInputElement>) => {
23    const { name, value } = e.target;
24    setInputs({
25      ...inputs,
26      [name]: value,
27    });
28  };
29
30  return (
31    <InputText
32      className="p-inputtext-sm"
33      name={name}
34      value={inputs[name] || ""}
35      disabled={Object.keys(data).length < 1 ? false : true}
36      onChange={onChange}
37    />
38  );
39};

Perplexing

동적 input를 사용하면 곤란한 상황들이 발생한다.
onChange()에 console.log를 찍으면 input에 글을 쓰는 순간 그 즉시 console.log가 찍히는 문제이다.
이 문제는 debounce를 사용하여 해결해 보도록 한다.

TYPESCRIPT
1useEffect(() => {
2  const debounce = setTimeout(() => {
3    console.log("디바운스 입력:", inputs);
4  }, 1000);
5  return () => clearTimeout(debounce);
6}, [inputs]);

이렇게하면 1초뒤, console.log가 찍히는 것을 확인 할 수 있다.

참고:
Debounce Input in React
Debounce&Throttle