멍청이 짓3. React Input 한 글자 입력 후, focus잃는 이유

React로 회원가입 로그인 구현 하기 중, Input에 글자 입력하면 자꾸 focus를 잃는다.
원인은 리-렌더링re-rendering이 되고 있는 현상인거 같다.

이 코드는..
내가 작성했던 코드다..

한 글자 입력 후, focus를 잃어버린다.

Register컴포넌트 안에서 PWCheckInput라는 컴포넌트 안에서 styled로 만든 태그를 사용했다.

• input만 함수 or 컴포넌트로 따로 묶는 경우이다.

그래서 해결법 ?

컴포넌트 안에 컴포넌트를 지워주고,
return 안에서 UI를 그려주었다.

그랬더니 리랜더링 되지 않고, 잘 작동한다.

일단 코드는 비효율적이다.
모든 작업을 마무리될 때 쯤, styled사용한 코드들을 리팩토링 해줘야되겠다.

구글링 자료

처음에 왜이러는거야!!! 하면서 열심히 원인을 찾기 위해 열심히 구선생님을 찾았다.
React Input 한 글자 입력 후, focus 잃는 현상을 찾은 블로그