[React] 한 글자 입력 후 focus 잃는 현상

주재완·2024년 1월 19일

React frontend

Frontend

목록 보기

2/2

개요

회원가입 페이지를 만들고 있는데...
입력 시 한글자 입력할 때 마다 커서가 focus를 잃어서 골머리를 앓고 있었다.
계정 생성 때마다 마우스를 계속 클릭해야되는 불상사가 발생한 것이다.

어떻게 해야되나 하면서 검색을 계속 해보았다.

문제의 해결 및 원인

문제 해결

도움이 되었던 것은 다음 포스팅이였다.
본인의 경우는 아래와 같이 작성한 것을 고쳐주니 해결이 되었다.

수정 전

export default function CreateAccount() {
	...
    // styled-component
    const CSSPart = styled.tag`
		...
	`;
  	...
    // jsx
    return (
		...
    );
}

수정 후

// styled-component
const CSSPart = styled.tag`
	...
`;

export default function CreateAccount() {
	...
    // jsx
    return (
		...
    );
}

즉, styled-component 를 아예 function 밖으로 꺼내주었다. 그 결과 다음과 같이 focus out 되는 현상이 없어졌다.

문제의 원인

styled-component객체가 원래 jsx안에 있으면 useState가 변경됨에 따라 입력시 마다 재성성되므로 멈춘다. 본인의 경우 jsx안까지는 아니고 export function 안에 넣어두었는데, 이 역시도 다른 파일에서 가져가면서 계속 재성성되는 듯 했다.