[React] 접속 시 input창에 자동 글쓰기

autofocus

nextjs/react 사용시 component 내부를 들어가면, 자동으로 input 창에 커서가 들어가게 하는 방법을 알아보자. 그리고 antd, material UI 등등의 툴에서도 input 태그에 autoFocus/autofocus를 넣어도 작동을 안하는 경우가 있다. 이러한 해결책을 코드를 통해 적어보도록 하겠다. 디테일한 설명은 빼고 바로 코드로 적어보겠다.(react/nextjs 관련 설명은 제외한다.) 만약 vanilla js에서 사용하는 관련 설명은 아래의 링크를 보고오자.

 

[form] input 태그을 focus 하기

 

 

 

1. useRef 설정

input과 같은 DOM 요소(element)를 수정해야한다면, 가장 먼저해야할 것은 어떤 요소를 변경/수정 할 것인지에 대한 선택이 필요하다. 따라서 vanillaJs에서는 document.querySelector와 같이 class나 id로 element를 선택하여 변수로 만든 후에 수정을 한다. react/nextjs에서도 당연히 관련 지정이 필요하다. react에서는 DOM을 수정해야한다면, Ref를 사용하면된다.

useRef를 선언한다. 

import { useRef } from 'react';

const emailRef = useRef();

 

 

2. input 창에 useRef 넣기

위에서 지정한 변수를 ref={emailRef} 형태로 원하는 element에 넣어주면된다. ref는 보통 focus나 attribute 값 관리에 자주 쓰인다.

input 창에 useRef 코드를 ref의 값으로 넣어준다.

import { useRef } from 'react';


<input type="text" name="email" ref={emailRef} value={email} onChange={onChange} />

 

 

3. useEffect에서 설정하기

 

페이지 진입 시 focus 할 수 있는 코드를 넣어준다.

  useEffect(()=> {
    emailRef.current.focus();
  }, [])

 

 

4. 코드 총 정리

정리하면 아래와 같다.

1. useRef 설정/선언
2. input 창에 useRef 넣기
3. useEffect에서 설정하기

1에서 3번 순서를 참고해서 아래의 코드를 보자. 어느정도 이해가 될 것이다. 

import React, { useState, useEffect, memo, useRef } from 'react';

const SignupForm = memo(({ createOrUpdateForm }) => {
  const [email, setEmail]  = useState('')
  const emailRef = useRef();

  const onChange = (event) => {
    if (event.currentTarget == null) {
      return;
    }
    event.preventDefault();
    createOrUpdateForm(event.currentTarget.name, event.currentTarget.value);
  };

  useEffect(()=> {
    emailRef.current.focus();
  }, [])

  return (
    <div className={styles.testContainer}>
      	... 
      
        <input type="text" name="email" ref={emailRef} value={email} onChange={onChange} />

		...
    </div>
  );
});

export default SignupForm;

 

이제 각자의 코드에서 적용해보자!

 

5. Forwarding Refs

컴포넌트 캡슐화를 위해 기본적으로는 하나의 컴포넌트에서 ref와 같은 DOM요소에 대한 관리는 한다. 그러나 부모 component에서 자식 component로 prop로 ref를 넘기는 경우가 있다.(ref로 prop를 넘기면 에러발생) 하지만, 캡술화를 무시하다라도 재사용을 위한 재사용을 위해서는 유용할 수 있다.  이러한 경우에 사용하는 것이 forwardRef이다.