[새싹 성동 2기] React ref의 이해와 사용법: 패스워드 검증 컴포넌트 구현

React의 ref는 DOM 요소나 React 컴포넌트에 대한 직접적인 참조를 생성하고 관리하는 데 사용되는 특별한 속성입니다.
ref는 DOM 조작이 필요한 특정 상황에서 활용되며, 대표적인 사용 사례는 다음과 같습니다.

• 포커스, 텍스트 선택 영역, 미디어 제어
• 애니메이션 실행
• 서드 파티 DOM 라이브러리와의 통합

이번 포스팅에서는 ref를 활용해 패스워드 검증 컴포넌트를 구현하는 과정을 살펴보겠습니다.

 

기능 요구사항

• 입력된 패스워드가 "0000"이면 입력창의 배경색을 파란색으로 변경.
• 입력된 패스워드가 틀리면 배경색을 빨간색으로 변경.
• 잘못된 경우 입력창에 포커스를 설정.

초기 코드: 클래스형 컴포넌트와 상태 관리

먼저 기본적인 컴포넌트를 작성합니다.

src 디렉터리 아래에 ref 디렉터리를 만들고, ValidatePassword.js 파일을 생성:

import { Component } from "react";


class ValidatePassword extends Component {
    state = {
        password: ''
    };


    changePassword = e => this.setState({ password: e.target.value });


    render() {
        return (
            <>
                <input type="password" value={this.state.password} onChange={this.changePassword} />
                <button>패스워드 검증</button>
            </>
        );
    }
}


export default ValidatePassword;

App.js 파일에 ValidatePassword 컴포넌트를 추가 

import ValidatePassword from "./ref/ValidatePassword";


function App() {
  return (
    <ValidatePassword />
  );
}


export default App;

 

입력값을 state로 관리하며, 버튼을 클릭하면 검증 로직을 수행합니다.

import { Component } from "react";

class ValidatePassword extends Component {
    // 초기 상태 정의
    state = {
        password: '', // 입력된 패스워드 값
        isValid: false // 패스워드 검증 결과
    };

    // 입력값을 업데이트하는 함수
    changePassword = (e) => this.setState({ password: e.target.value });

    // 패스워드를 검증하는 함수
    checkValid = () => {
        if (this.state.password === "0000") {
            this.setState({ isValid: true }); // 검증 성공
        } else {
            this.setState({ isValid: false }); // 검증 실패
        }
    };

    render() {
        return (
            <>
                {/* 입력창과 상태에 따른 배경색 설정 */}
                <input
                    type="password"
                    value={this.state.password}
                    onChange={this.changePassword}
                    style={this.state.isValid ? { backgroundColor: 'blue' } : { backgroundColor: 'red' }}
                />
                <button onClick={this.checkValid}>패스워드 검증</button>
            </>
        );
    }
}

export default ValidatePassword;

 

ref를 이용한 포커스 설정

ref를 사용하는 방법은 두가지가 있습니다. 간단한 형식은 아래와 같습니다.

React.createRef() API를 이용하는 방법 (리액트 16.3에서 추가, 사용 권장)
class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myref = React.createRef();			⇐ #1 생성자에 createRef() 함수의 호출 결과를 ref 변수에 설정
  }							      → current 속성을 가진 객체를 반환

  handler = () => this.myref.current.focus(); 	⇐ #3 참조를 사용할 때 ⇒ ref변수명.current.DOM요소기능

  render() {
    return <input ref={this.myref} />;		⇐ #2 참조할 DOM 요소 또는 컴포넌트에 ref 속성을 추가
  }
}


콜백 ref를 이용하는 방법
ref 속성에 React.createRef()를 통해 생성된 ref를 전달하는 대신, 함수를 전달 
전달된 함수는 다른 곳에 저장되고 접근할 수 있는 리액트 컴포넌트의 인스턴스나 DOM 엘리먼트를 인자로 받음 

<input ref={x => this.myref = x} />
                 ~~~~~~~~~~
                 이 변수를 이용해서 <input> 요소를 직접 제어하는 것이 가능 ( 예: this.myref.focus() )

1. 콜백 ref를 이용하는 방법

콜백 ref는 함수 형태로 ref를 정의합니다. 이를 통해 입력창 DOM 요소를 직접 참조할 수 있습니다.
검증 실패 시 입력창에 포커스를 설정하도록 수정해봅시다.

import { Component } from "react";

class ValidatePassword extends Component {
    // 초기 상태 정의
    state = {
        password: '',
        isValid: false
    };

    // 입력값을 업데이트하는 함수
    changePassword = (e) => this.setState({ password: e.target.value });

    // 패스워드를 검증하는 함수
    checkValid = () => {
        if (this.state.password === "0000") {
            this.setState({ isValid: true }); // 검증 성공
        } else {
            this.setState({ isValid: false }); // 검증 실패
            this.myinput.focus(); // 입력창에 포커스 설정
        }
    };

    render() {
        return (
            <>
                {/* 콜백 ref를 사용하여 DOM 요소를 참조 */}
                <input
                    ref={(x) => (this.myinput = x)}
                    type="password"
                    value={this.state.password}
                    onChange={this.changePassword}
                    style={this.state.isValid ? { backgroundColor: 'blue' } : { backgroundColor: 'red' }}
                />
                <button onClick={this.checkValid}>패스워드 검증</button>
            </>
        );
    }
}

export default ValidatePassword;

2. React.createRef()를 이용하는 방법

React 16.3 이상에서는 React.createRef()를 사용해 보다 간결하게 ref를 설정할 수 있습니다.
다음은 동일한 기능을 createRef로 구현한 예제입니다.

import { Component, createRef } from "react";

class ValidatePassword extends Component {
    constructor(props) {
        super(props);
        // createRef()를 사용해 ref 생성
        this.myinput = createRef();
    }

    state = {
        password: '',
        isValid: false
    };

    // 입력값을 업데이트하는 함수
    changePassword = (e) => this.setState({ password: e.target.value });

    // 패스워드를 검증하는 함수
    checkValid = () => {
        if (this.state.password === "0000") {
            this.setState({ isValid: true }); // 검증 성공
        } else {
            this.setState({ isValid: false }); // 검증 실패
            this.myinput.current.focus(); // 입력창에 포커스 설정
        }
    };

    render() {
        return (
            <>
                {/* createRef()를 사용하여 DOM 요소를 참조 */}
                <input
                    ref={this.myinput}
                    type="password"
                    value={this.state.password}
                    onChange={this.changePassword}
                    style={this.state.isValid ? { backgroundColor: 'blue' } : { backgroundColor: 'red' }}
                />
                <button onClick={this.checkValid}>패스워드 검증</button>
            </>
        );
    }
}

export default ValidatePassword;

 

비교: 콜백 ref vs. React.createRef()

특징	콜백 ref	React. createRef()
선언 방식	함수 형태로 정의	클래스 생성자에서 createRef() 호출
유연성	다양한 동작 추가 가능	기본적으로 DOM 요소 참조에 최적화
사용 가능 시점	렌더링 직후 설정 가능	렌더링 중에 ref를 정의
코드 가독성	비교적 복잡한 구조	간결하고 읽기 쉬움

 

 

 

 

 

 

*생성형 AI 활용한 클라우드&보안 전문가 양성캠프 과정의 교육내용 정리 자료입니다.