react-hook-form useController rendering 에러 해결

문제 상황

필터에 값을 입력할 때마다 페이지가 전체 렌더링된다.

조건

• index 페이지에서 useForm 선언 → useController를 사용하여 field 사용
• <Filter />에서 useController를 사용하여 field 사용

결과

• <Filter />에서 c.onChange를 할 때마다 index 페이지 전체 렌더링

// index.tsx

const Index = () => {
  const methods = useForm<Search>({
    defaultValues: {
      a: "ALL",
      b: "1",
      c: null,
    },
  });

  const { control } = methods;

  const { field: a } = useController({
    name: "a",
    control,
  });

  const { field: b } = useController({
    name: "b",
    control,
  });

  const { field: c } = useController({
    name: "c",
    control,
  });
  
  // API 호출하는 hook 사용

  return (
    <FormProvider {...methods}>
      <Container>
        <Filter />
        <ATable />
        <BTable />
      </Container>
    </FormProvider>
  );
};

export default Index;

// Filter.tsx

			  <input
                // ref={agencyNameInputRef}
                placeholder="검색어를 입력해주세요."
                onChange={(e) => c.onChange(e.target.value)}
              />
              <SearchButton onClick={onSearch}>조회</SearchButton>

이유

페이지에서 useController로 c를 사용하는데, c.value가 <Filter />에서 계속 바뀌어 페이지가 리렌더링된다.

해결

1. useForm을 <Filter /> 안에 넣어서 사용한다. → API 호출하는 hook에서 c를 사용하고 있어 불가능함
2. <Filter />에서 input에 ref를 건다. 페이지를 나갔다가 다시 들어왔을 때 filter가 유지되게 하려면 URL에 저장하여 state로 관리하면 된다.

// Filter.tsx

const Filter = () => {
  const inputRef = useRef<HTMLInputElement | null>(null);

  const handleSearch = () => {
    if (inputRef.current) onSearch(inputRef.current.value);
  };
  
  ...
  
              <input
                ref={inputRef}
                placeholder="검색어를 입력해주세요."
              />
			  <SearchButton onClick={handleSearch}>조회</SearchButton>

화면

전

후