TIL 23.06.22 스타일 컴포넌트, 인풋값 오류

문제점

React 프로젝트 중, 스타일 컴포넌트를 적용한 후에 인풋 값에 글씨를 입력하면 하나만 입력해도 포커스가 해제되는 현상이 있었다.

 

시도해본 것 

1. 스타일 컴포넌트 내용 수정

스타일에 문제가 있는것인가 싶어서 인풋과 관련한 스타일을 제거하고 시도해봤으나 역시나 안됨.

2. onChange 핸들러가 제대로 동작하는지 검증

onChange 프로퍼티 안에 직접 함수를 작성해보고, 밖으로 빼서 핸들러를 만들어 작성했으나 결과는 역시 같았다.

 

해결방안

개발자도구 창의 콘솔에서 스타일 컴포넌트들을 컴포넌트밖으로 빼라는 주의 문구가 있었나. 오류가 나는 것은 아니었으나 함수 밖으로 빼서 전역으로 사용했더니, 인풋값에 값 입력이 잘 되었음.

 

알게된것

스타일 컴포넌트는 App이든 다른 컴포넌트 , 함수안에 있으면 안되는 구나 하는 것을 제대로 배웠다.