AI Platform / Web

로그인 화면을 들어가 보면 마우스를 클릭할 필요 없이, 바로 input 창에 커서가 올라가 있는 것을 확인 할 수 있다. 이러한 방법을 autofocus라고 한다. 관련 내용을 보면서 구현까지 해보도록 하자. autofocus 페이지 로드 시 별도의 클릭없이 지정한 input창에서 바로 작성을 가능하게 할 수 있도록 하는 기능을 만들어 보자. 이러한 기능을 autofocus라고 한다. 기본적으로 vanilla javascript로 작성을 해보자. 당연히 react에서도 focus를 사용할 수 있다. 아래의 예시를 처음부터 자세히 본다면, 앞으로 autofocus를 마스터 했다고 할 수 있다. react/nextjs에서 autofocus를 사용하는 방식은 약간 다르다. 관련 내용은 아래의 링크를 참고하자...

autofocus nextjs/react 사용시 component 내부를 들어가면, 자동으로 input 창에 커서가 들어가게 하는 방법을 알아보자. 그리고 antd, material UI 등등의 툴에서도 input 태그에 autoFocus/autofocus를 넣어도 작동을 안하는 경우가 있다. 이러한 해결책을 코드를 통해 적어보도록 하겠다. 디테일한 설명은 빼고 바로 코드로 적어보겠다.(react/nextjs 관련 설명은 제외한다.) 만약 vanilla js에서 사용하는 관련 설명은 아래의 링크를 보고오자. [form] input 태그을 focus 하기 1. useRef 설정 input과 같은 DOM 요소(element)를 수정해야한다면, 가장 먼저해야할 것은 어떤 요소를 변경/수정 할 것인지에 대한 선..