React.forwardRef()를 활용하여 컴포넌트의 정규식(Regular Expression) 검사 방법에 대해 알려주세요.

10 Nov 2023

reactjs

정규식(Regular Expression)은 주어진 패턴과 일치하는 문자열을 찾는 데 사용되는 강력한 도구입니다. 이번 글에서는 React의 forwardRef()를 활용하여 정규식 검사를 수행하는 컴포넌트를 만들어보겠습니다.

forwardRef()란?

forwardRef()는 React에서 제공하는 API 중 하나로, 부모 컴포넌트로부터 전달받은 ref를 하위 컴포넌트에서 직접 사용할 수 있게 해줍니다. 주로 함수형 컴포넌트에서 사용되며, ref를 전달받아 하위 컴포넌트 내에서 참조할 수 있습니다.

정규식 검사 컴포넌트 만들기

아래의 예시 코드는 InputWithRegex라는 이름의 컴포넌트를 정의하는 예시입니다.

import React, { forwardRef } from 'react';

const InputWithRegex = forwardRef((props, ref) => {
  const { pattern, ...rest } = props;
  
  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    
    if (pattern.test(inputValue)) {
      // 패턴과 일치하는 경우에 대한 처리
    } else {
      // 패턴과 일치하지 않는 경우에 대한 처리
    }
  };
  
  return (
    <input ref={ref} onChange={handleInputChange} {...rest} />
  );
});

export default InputWithRegex;

위 코드에서 pattern은 정규식 패턴을 나타냅니다. InputWithRegex 컴포넌트의 onChange 이벤트 핸들러에서 입력된 값과 pattern을 비교하여 일치 여부를 판단하고, 그에 따른 처리를 수행할 수 있습니다.

컴포넌트 사용하기

아래의 예시는 InputWithRegex 컴포넌트를 사용하는 방법을 보여줍니다.

import React, { useRef } from 'react';
import InputWithRegex from './InputWithRegex';

const App = () => {
  const inputRef = useRef();

  const handleButtonClick = () => {
    // inputRef를 활용하여 입력된 값에 대한 검사 수행
    const inputValue = inputRef.current.value;
    // ...

  };

  return (
    <div>
      <InputWithRegex ref={inputRef} pattern={/^\d+$/} />
      <button onClick={handleButtonClick}>Submit</button>
    </div>
  );
};

export default App;

위의 예시에서 InputWithRegex 컴포넌트를 사용할 때, ref와 pattern prop을 설정해주어야 합니다. ref를 활용하여 컴포넌트 내부의 입력 값을 가져올 수 있으며, pattern prop을 통해 검사할 정규식 패턴을 전달할 수 있습니다. 따라서, 사용자는 정해진 패턴에 맞지 않는 값을 입력할 수 없게 됩니다.

React에서 forwardRef()를 활용하여 정규식 검사를 하는 컴포넌트를 만들고 사용하는 방법에 대해 알아보았습니다. 정규식으로 입력값을 검사하는 컴포넌트를 사용하면, 사용자로부터 올바른 데이터를 입력받을 수 있어 더욱 안정적인 애플리케이션을 개발할 수 있습니다.

#React #정규식검사