forwardRef에 대한 회고

글을 잘 작성하신 것 같습니다 👍 이전에 한번 보고 잊어버렸던 forwardRef에 대해 다시 한번 복습할 수 있었습니다. 다만 일반적으로 ref를 사용하지 않고 forwardRef를 사용하는 것은 장점보다는 단점이 많지 않을까 합니다. 컴포넌트 간 결합도 증가 직접적인 참조: forwardRef를 사용하면 부모 컴포넌트가 자식 컴포넌트의 내부 요소(예: DOM 노드)에 직접 접근합니다. 이로 인해 부모 컴포넌트와 자식 컴포넌트 간에 강한 결합이 생깁니다. 부모 컴포넌트는 자식 컴포넌트의 내부 구현에 대한 지식이 필요하게 되며, 이는 컴포넌트 간의 의존성을 높입니다. 재사용성 저하: 자식 컴포넌트가 특정 부모 컴포넌트에 종속되는 형태로 개발될 수 있습니다. 예를 들어, 특정 ref 로직을 사용하는 부모 컴포넌트에 최적화된 자식 컴포넌트는 다른 상황이나 부모 컴포넌트에서 재사용하기 어려워질 수 있습니다. DOM 조작 주의: ref를 통해 DOM 요소에 직접 접근하면, React의 선언적 렌더링 패러다임을 벗어나게 됩니다. 이는 예기치 않은 부작용을 일으킬 수 있으며, 특히 React의 렌더링 사이클과 동기화되지 않는 경우 문제가 발생할 수 있습니다. 렌더링 최적화 문제: React는 렌더링 최적화를 위해 컴포넌트의 상태와 props의 변화를 감지합니다. 하지만 ref를 통해 DOM을 직접 조작하면, 이러한 최적화가 방해받을 수 있습니다. 예를 들어, ref를 통한 DOM 변경은 React의 상태 업데이트와 동기화되지 않아 성능 문제를 일으킬 수 있습니다. 일단 검색하면서 알게 된 단점으로 사용시 주의가 필요하며 다른 이벤트와 관련되어 문제가 발생될 리스크가 많은 것 같습니다. 장점 또한 분명 존재합니다. 다만 useMemo와 같은 성능 훅이나 forwardRef 와 같은 기능들은 일반적으로 배제하되 꼭 사용해야 한다면 최후에 사용하는 마스터 키와 같다고 생각합니다. 저라면 input과 button의 focus를 다음과 같이 구성해 볼 것 같습니다. https://url.kr/na85zt (물론 사람에 따라 다른 측면이라 정답은 아닙니다 😅)

1import React, { useRef } from 'react';
2
3// 커스텀 훅: input 요소에 포커스를 맞추는 로직
4function useInputFocus() {
5  const inputRef = React.useRef(null);
6
7  const focusInput = () => {
8    inputRef.current && inputRef.current.focus();
9  };
10
11  return [inputRef, focusInput];
12}
13
14// 인풋
15function InputComponent({ inputRef }) {
16  return <input ref={inputRef} />;
17}
18
19// 버튼
20function ButtonComponent({ onClick }) {
21  return <button onClick={onClick}>Focus on Input</button>;
22}
23
24//레이아웃
25function ParentComponent() {
26  const [inputRef, focusInput] = useInputFocus();
27
28  return (
29    <>
30      <InputComponent inputRef={inputRef} />
31      <ButtonComponent onClick={focusInput} />
32    </>
33  );
34}