styled components 사용 시 input focus 아웃되는 이슈

펀딩 개설 페이지에 들어가는 인풋폼에 styled-components를 사용하고 있는데, input onChange가 일어나면 focus가 아웃되는 문제가 발생하여 해결 방법을 적어보려고 한다!

문제 상황

요렇게 정상적으로 숫자 or 텍스트 입력이 되는 것이 일반적인데..

한글자만 입력해도 포커스 아웃되는 상황이 발생했다.

처음엔 다른 문제인 줄 알고 어먼짓(?)하다가 styled 적용을 풀어보니 이런 오류가 발생하지 않는 걸 확인했다.

리액트는 state 값이 변경될 때마다 컴포넌트의 리렌더링이 발생하는데, onChange가 일어나면 children이 리렌더링 되기 때문에 input form의 focus를 잃어버리게 되는 것이다.

요럴 땐 그냥.. styled를 별도의 컴포넌트로 빼면 해결된다. (어이탱..)