# input focus
useRef로 DOM 조작 - input element의 focus
0. 구현하고 싶은 부분 사용자의 입력 값의 최소 길이를 정해 놓고 그 길이 미만일 경우 사용자가 값을 입력하게끔 하고 싶다. 이 부분을 Alert()로 만들 수도 있지만, 사용자가 입력 후 경고창으로 메시지를 노출하기보다 좀 더 유연하게 피드백을 줄 수 있는 것이 focus라고 생각한다. 따라서 이 부분을 alert()가 아닌 input element의 focus로 컨트롤 해보자. 1. useRef 사용 useRef hook을 사용해서 authorInput에 React.MutableRefObj를 담고, authorInput를 콘솔에 찍어보면 아래와 같다. 
react에서 styled components 사용시 input tag에서 focus를 잃어버리는 문제
react에서 styled components를 적용하기 시작하였습니다. styled components를 input tag에 적용하여 사용하던 도중 input의 onChange()함수에서 state를 변경하였습니다. 하지만 컴포넌트에서 매 입력시마다 input에서의 focus를 잃어버리는 일이 발생하였는데요. 그 원인과 해결에 대하여 기록합니다. 1. 오류 상황 해당 컴포넌트에서 useState()를 사용하여 onChange() 시에 state를 변경하게 되었습니다. 다음과 같은 코드에서 오류가 발생하게 되었습니다. 실행은 여기에서 확인하시면 됩니다. 위의 코드를 실행해보면 매 입력시마다 input의 focus를 잃어버리는데요. 리액트 컴포넌트에서는 state 값이 변경될때마다 매번 컴포넌트의 리렌더링이 발생합