input 한글자 입력후 focus사라지는 현상

Question

어...아래 에러는 해결했는데 로그인할때 input창에서 한글자 입력하면 focus를 잃어서 다시 입력하려면 input창을 클릭해야하는 현상이 발생하는데 이건 어디서 문제가 발생한 걸까요 제가 보이에는 ch3에 있는 코드랑 styled컴포넌트를 사용한거 제외하고는 동일해 보이거든요ㅠㅠ import React, { useCallback } from " react " ; import { Form, Input, Button } from " antd " ; import Link from " next/link " ; import styled from " styled-components " ; import { useDispatch } from " react-redux " ; import { loginAction } from " ../reducers " ; import useInput from " ../hooks/useInput " ; const ButtonWrapper = styled . div ` margin-top : 10 px ; ` ; const LoginForm = () => { const dispatch = useDispatch () ; const [ id , onChangeId ] = useInput ( "" ) ; const [ password , onChangePassword ] = useInput ( "" ) ; const onSubmitForm = useCallback ( () => { console . log ( id , password ) ; dispatch ( loginAction ( { id , password } )) ; }, [ id , password ]) ; const FormWrapper = styled ( Form ) ` padding : 10 px ; ` ; return ( < FormWrapper onFinish = { onSubmitForm } > < div > < label htmlFor = " user-id " > 아이디 < br /> < Input name = " user-id " value = { id } onChange = { onChangeId } required /> < div > < label htmlFor = " user-password " > 비밀번호 < br /> < Input name = " user-password " type = " password " value = { password } onChange = { onChangePassword } required /> < ButtonWrapper > < Button type = " primary " htmlType = " submit " loading = { false } > 로그인 < Link href = " /singup " > < a > < Button > 회원가입 ) ; } ; export default LoginForm ;

제로초(조현영) · Answer

스타일을 감싼 객체를 계속 만들어주는 건 맞고요. 이게 바뀌어서 리렌더링하는 게 아니라 리렌더링할 때 컴포넌트 안에 styled.Form이 있으니까 form이 새로 만들어지는 겁니다.

김우희 · Answer

아 스타일드 컴포넌트는 그럼  스타일을 감싼 객체??를 계속 만들어줘서  리액트에서 from이 변화했다고 감지해서 리렌더링을 해주는것 이라고 이해하면 될까요??

제로초(조현영) · Answer

안에 있으면 FormWrapper를 글자 한 번 칠때마다 새로 생성합니다. 그래서 포커스가 풀리는 것 같은 느낌이 드는 것입니다.

김우희 · Answer

오 밖으로 빼니까 되네요!!! 안에있으면 안되는 이유가 뭔가요??

제로초(조현영) · Answer

const FormWrapper를 LoginForm 바깥으로 빼세요.