웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react

antd Input 태그에 focus 이벤트 사용하기

Last Modified : 2020-12-13 / Created : 2020-12-10
7,582
View Count

React 앱에서 antd의 Input 컴포넌트를 사용하고 있을 경우 만약 특정 시점에 Input 컴포넌트에 focus 되어 커서가 위치하게 하려고 합니다. 예를들어 검색 버튼을 클릭하는 경우 검색 Input 컴포넌트에 커서가 focus되어 타이핑이 바로 가능하도록 구현하려고 합니다. 어떻게 하면 될까요?

먼저 실패한 케이스를 알아봅니다. 순수 자바스크립트로 DOM에 접근하여 input 태그에 focus() 메소드를 동작해보았습니다. 에러는 발생하지 않지만 정상적으로 focus 되지 않아 다른 방법이 필요했습니다.



# antd Input에서 focus 사용하기

결과적으로 react에서 refs를 사용하여 엘리먼트에 접근하는 방법을 사용하였습니다. 즉, Input에 ref prop 정보를 추가한 후에 createRef() 메소드를 사용하여 새로운 ref를 생성합니다. 그 다음에 current.focus()를 사용하였더니 매우 잘 동작하였습니다.

다시 간단한 예제로 만들어 보면 아래와 같이 코드를 작성할 수 있습니다. 임의의 myComponent를 생성한 예제입니다. 우선 컴포넌트를 만듦니다. 그리고 state에 searchRef 이름의 ref를 생성합니다.

@ myComponent.jsx
class myComponent extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      searchRef: React.createRef()
    }
  }
  ...
}

export default myComponent;

이제 버튼을 하나 만들고 클릭할 경우 Input 컴포넌트에 포커스 되도록 코드를 작성합니다.
focusSearch = () => {
  this.state.searchRef.current.focus();
};

render() {
  return (
    <Input
      ref={searchRef}
      placeholder="검색어를 입력하세요"
    />
    <button
      onClick={ this.focusSearch }>클릭</button>
  )
}

코드 작성은 여기가 모두 끝입니다. 간단하게 순서대로 알아보겠습니다.

1. 버튼을 클릭시 this.focusSearch() 함수를 실행합니다.
2. 실행된 함수는 아래와 같이 state에 저장된 searchRef를 불러와 focus()되도록 합니다.
3. 커서는 Input 컴포넌트로 위치하고 키 입력이 바로 가능하게 됩니다.

위 과정에 따라 실행되게 됩니다.


! 마지막으로 정리하면...

순수 자바스크립트를 antd 컴포넌트에 적용하여 input 태그의 DOM 정보를 가져오고 여기에 focus()와 같은 이벤트를 호출할 경우 동작하지 않을 수 있다는 점입니다. 그래서 이를 해결하기 위한 방법으로 React의 ref를 사용하여 실행하니 잘 해결되었습니다. 여기까지 antd의 Input 컴포넌트 사용시 focus하기 위한 방법을 알아보았습니다.


Previous

react 검색창에 debounce 적용하는 방법

Previous

antd Table 컴포넌트 체크박스 사용 방법 및 예제