[React] input에서 한 글자 입력 후 포커싱이 풀리는 현상

특정 값에 따라서 서로다른 input엘리먼트가 보이는 컴포넌트를 만들던 도중, 한 글자를 입력 할 때 마다 input의 포커싱이 풀리는 현상이 나타났다.

대체 왜 그런가 했더니 테스트용으로 외부에 만들어뒀던 Input 컴포넌트가 스코프 내부에 들어있었다.

import React, { useState } from 'react';

const App = () => {
  const [inputValue, setInputValue] = useState('');

  const InputComponent = () => (
    <input
      value={inputValue}
      onChange={(e) => setInputValue(e.target.value)}
    />
  );

  return (
    <div>
      <label>input label</label>
      <InputComponent />  {/* 이 컴포넌트는 App 컴포넌트가 리렌더링될 때마다 새로 생성됨 */}
    </div>
  );
}

export default App;

위의 코드는 내 코드를 간소화한 예시코드인데, 위와 같이 짜게 되면 App 컴포넌트가 리렌더링 될 때, 내부의 InputComponent를 새 컴포넌트로 인식해서 리렌더링을 하기 때문이다.

import React, { useState } from 'react';

const InputComponent = ({ value, onChange }) => (
  <input
    value={value}
    onChange={onChange}
  />
);

const App = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <h1>Type Something</h1>
      <InputComponent
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
    </div>
  );
}

export default App;

해결법은 위와 같이 InputComponent를 App 컴포넌트 외부로 분리시키면 재생성이 되지 않기 때문에 필드의 포커스가 유지된다.