TestDome React Focusable Input

< codeSandbox >

 

렌더링 될 때 shouldFocus prop이 true면 자동 포커스 되게끔 하면 되는 문제다.

functional component이므로 useRef로 DOM에 접근해서 focus() 메서드를 사용하면 될 것 같다.

우선 문제의 요구사항은

1. shouldFocus가 true일 때 input focusing

2. 오직 첫 렌더링때만 input focuing

3. react hook 사용

const FocusableInput = (props) => {
  const inputRef = React.useRef();
  React.useEffect(() => {
    if (props.shouldFocus) inputRef.current.focus();
  });
  return <input ref={inputRef} />;
};

document.body.innerHTML = "<div id='root' />";
ReactDOM.render(
  <FocusableInput shouldFocus={true} />,
  document.getElementById("root")
);
setTimeout(() => console.log(document.getElementById("root").innerHTML));

주의해야 할 점은 렌더링 되기 전에 ref의 focus 메서드를 호출하려 하면 Cannot read property 'focus' of undefined오류가 발생한다.

따라서 useEffect를 사용해야한다.

useEffect는 우리가 넘긴 함수를 기억했다가 DOM업데이트를 수행한 이후에 불러온다.