[React]input Element 포커싱 처리

StackOverFlow를 눈팅하던 도중 2015년에 작성된 흥미로운 글을 발견했습니다.

렌더링 후 input Element를 포커싱 처리를 어떻게 하는지 질문하는 글이었습니다.

https://stackoverflow.com/questions/28889826/how-to-set-focus-on-an-input-field-after-rendering

How to set focus on an input field after rendering?

위 질문에 대한 답변과 구글링 결과 render 후 포커싱을 처리하는 방법은 정적인 방법과 동적인 방법이 존재합니다.

정적인 방법은 autoFocus 속성을 사용하며, 동적인 방법은 ref를 사용합니다.

---

정적인 방법

포커싱 처리하고자 하는 input element에 autoFocus 속성을 사용합니다.

<input type="text" autoFocus />

만약 autoFocus 속성을 설정한 input element가 여러 개 존재할 경우 제일 마지막에 작성된 inpue element에 포커싱 처리가 됩니다.

즉, 아래 코드에서는 id가 input3인 input element에 포커싱 처리됩니다.

<input id="input1" type="text" autoFocus />
<input id="input2" type="text" autoFocus />
<input id="input3" type="text" autoFocus />

---

동적인 방법

1. Class기반의 컴포넌트: 일반적인 방법

컴포넌트 생명주기는 constructor() -> render() -> componentDidMount() 순서로 실행됩니다.

constructor()에서 ref를 생성합니다.

render()에서 생성자에서 생성한 inputFocus와 input Element를 연결합니다.

componentDidMount()에서 포커싱 처리합니다.

class App extends Component {
  constructor(props) {
    super(props);

    this.inputFocus = React.createRef();
  }

  componentDidMount() {
    this.inputFocus.current.focus();
  }

  render() {
    return (
      <React.Fragment>
        <input ref={this.inputFocus} />
      </React.Fragment>
    );
  }
}

2. Class기반의 컴포넌트: ref Callback

ref의 콜백 기능을 사용하여 생성자를 사용하지 않고 inputFocus와 input element를 연결합니다.

class App extends Component {
  componentDidMount() {
    this.inputFocus.focus();
  }

  render() {
    return (
      <React.Fragment>
        <input
          ref={(input) => {
            this.inputFocus = input;
          }}
        />
      </React.Fragment>
    );
  }
}

3. Class기반의 컴포넌트: ref Callback

2번 방법보다 코드가 훨씬 간소화되었습니다.

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <input
          ref={function (input) {
            if (input != null) {
              input.focus();
            }
          }}
        />
      </React.Fragment>
    );
  }

4. Hook기반의 컴포넌트

const App = () => {
  const inputFocus = useRef(null);

  useEffect(() => {
    inputFocus.current.focus();
  }, []);

  return (
    <React.Fragment>
      <input ref={inputFocus} />
    </React.Fragment>
  );
};

---

마무리

DOM에 직접 접근하는 방법보다 React에서 지원하는 ref를 사용하는 것을 권장합니다.

만약, 동적으로 처리하지 않는다면 autoFocus 속성을 사용하면 됩니다.