react eslint가 useRef를 막 쓴다고 할 때 화해하기

const [stepContentRef, setStepContentRef] = useState([useRef(null)]);
const [stepImgFileRef, setStepImgFileRef] = useState([useRef(null)]);

const addStepBtnHandler = () => {
  const lastIdx = orderArr.length + 1;
  setStepContentRef((prev) => {
    const newRefs = [...prev];
    newRefs.push(useRef(null));
    return newRefs;
  });
  setStepImgFileRef((prev) => {
    const newRefs = [...prev];
    newRefs.push(useRef(null));
    return newRefs;
  });
  setOrderArr((prev) => {
    return [...prev, lastIdx];
  });
};

React Hook "useRef" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

 

해석하면, React Hook "useRef"는 콜백 안에서 호출할 수 없다. React Hook은 React 함수 컴포넌트 또는 custom React Hook 함수에서 호출되어야 한다.

 

그러니깐, 컴포넌트 안의 어떤 함수나 훅의 callback함수에서 useRef를 사용할 수 없다는 것이다.

 

검색해도 안나와서 ㅠㅠ 그렇다면 어떻게 해야할까 공식문서를 찾아봤는데

createRef가 있었다.

 

https://react.dev/reference/react/createRef

createRef – React

주로 클래스 컴포넌트에서 사용되며 ref를 만들 수 있는 생성자이다.

 

함수형 컴포넌트에서 createRef는 리렌더링될 때마다 null로 초기화된다.

하지만, 나는 기본적으로 ref가 null이고 리렌더링 되는 경우 배열은 1개를 가진 것으로 초기화되어야 하니, 나에게 있어서 이런 로직은 의미가 없다.

 

그래서 콜백함수의 useRef를 createRef를 써서 끝!

 

...
  setStepContentRef((prev) => {
    const newRefs = [...prev];
    newRefs.push(useRef(null));
    return newRefs;
  });
...

 

reference

https://react.dev/reference/react/createRef