react input focus out / 리액트 입력 포커스아웃 문제

.. 처리 중 받는 입력이 생겨 input을 테스트 하고 있었는데
갑자기 동작이 이상했다.
한 글자를 입력할 때마다 포커스 아웃이 반복되는 것 ?!?!

입력이 바뀔 때마다 state가 변하는데, 원래는 변한 부분만 감지하여 리렌더링 해야하지만 ... 원래 있던 위치(input의 안!)를 못 찾아 전체가 리렌더링되어 발생하는 문제라고 대충 해석을 하였다.

비슷한 문제를 겪는 사람들을 발견하고, 해결책이라고 나온 거의 모든 것들을 다 해보았다.

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

https://stackoverflow.com/questions/42573017/in-react-es6-why-does-the-input-field-lose-focus-after-typing-a-character

... 어떤 걸로도 해결되지 않았다.
1. 온갖 곳에 key를 추가해도 ...
2. 함수를 부르는 형식을 JSX 안에서{input()} -> <Input>로 바꾸어도 ....
3. useRef를 가져와
const inputRef=useRef(null)하고, input에 속성으로 ref={inputRef}를 넣어줘도 ...

해결되지 않던 와중에 방법을 찾았다.

도움이 된 답변은 이것.
https://stackoverflow.com/a/66307897

state가 엮여있어 그냥 하나의 함수 안에 컴포넌트들 여러 개를 선언해서 사용했는데, 이것들을 함수 밖에 빼서 선언해서(외부화) 가져다 쓰니 문제가 발생하지 않았다.

when the state changed, react would render the InputMulti component which would redefine the Label component every time, meaning the output would be structurally the same, but because of JS, the function would be considered !=.
My solution was to move the Label component outside of the InputMulti component so that it would be static.

정리해보면 state가 바뀔 때마다 react가 리렌더링을 시키는데, 컴포넌트를 내부에 선언한 경우 구조적으로 렌더링 전과 동일하더라도 JS의 특성 때문에 같은 것으로 판단하지 않는다는 것이었다.

컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출하여서 실행되는 것을 말한다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수 등)도 매번 다시 선언되어 사용된다.

결론. 컴포넌트는... 분리하자!