TIL 30일차 styled component 사용시 인풋 오류

 

 

 

문제점 :

 

다음과 같이 인풋버튼을 styled component를 이용해서 만들었다.

만들어진 페이지는 다음과 같다. 이때 onChange를 통해서 값을 받는데, 이 값이 다시 value값으로 들어가기 때문에 값을 입력할 때마다 리렌더링이 일어난다.

근데 만약 styled component를 사용하기 전에는 인풋의focus가 바뀌지 않는데,  styled component를 사용하면 포커스가 바뀐다. 

 

해결방법 :

styled component를 함수안에 넣어서 선언 할 경우에  해당 함수 자체가 같이 리렌더링이 되면서 그 안에 잇던 컴퍼넌트도 다시 만들어진다. 그렇기 때문에 새로 만들어진 component에서는 포커스가 없을 수 밖에 없다.

따라서 input값에서 계속 포커스가 바뀐 것 처럼 느껴진다.

이를 해결하기 위해서 함수 밖에 styled component를 선언하면 된다.

 

 

 

 

 

 

 

참고 : 

https://velog.io/@cjy9306/react%EC%97%90%EC%84%9C-styled-components-%EC%82%AC%EC%9A%A9%EC%8B%9C-input-tag%EC%97%90%EC%84%9C-focus%EB%A5%BC-%EC%9E%83%EC%96%B4%EB%B2%84%EB%A6%AC%EB%8A%94-%EB%AC%B8%EC%A0%9C

react에서 styled components 사용시 input tag에서 focus를 잃어버리는 문제

 

https://www.inflearn.com/questions/121968/input-%ED%95%9C%EA%B8%80%EC%9E%90-%EC%9E%85%EB%A0%A5%ED%9B%84-focus%EC%82%AC%EB%9D%BC%EC%A7%80%EB%8A%94-%ED%98%84%EC%83%81

input 한글자 입력후 focus사라지는 현상 - 인프런 | 질문 & 답변