[토이프로젝트] input 입력 시 한글자만 입력되고 더이상 입력되지 않는 에러가 발생

# 트러블 이슈

input창에 입력된 값을 useRef가 아닌 useState로 관리하고자 코드를 짰다. 

하지만, input 입력 시 한글자만 입력되고 더이상 입력되지 않는 에러가 발생했다.

 

# 해결 과정

useState를 잘못 사용하고 있다고 판단하여 관련 코드를 살펴봤지만 잘못된 부분은 없었다.

하지만 console 창을 열어본 순간 warning이 잔뜩 나왔다. 

The component styled.div with the id of "__" has been created dynamically. 
You may see this warning because you've called styled inside another component. 
To resolve this only create new StyledComponents outside of any render method and function component

알고보니 Styled Component의 문제였다.

나는 CSS를 Styled Component로 개발하고 있었다.

그래서 input 값이 바뀔 때마다 리렌더링이 되고 리렌더링 될 때, Styled Component로 꾸며진 부분이 다시 불러오게 되면서 값이 입력이 되지 않았다.

 

# 해결 방법

함수형 컴포넌트 안에 Styled Component 코드를 바깥으로 이동하면 해결된다