리액트 - ref

목차

 

ref란 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법을 말합니다. DOM을 꼭 직접적으로 건드려야 할 때 ref를 사용합니다. 함수 컴포넌트에서 ref를 사용하면 Hooks를 사용해야 하기 때문에 클래스형 컴포넌트에서 ref를 사용하는 방법을 정리하겠습니다.

 

• 특정 input에 포커스 주기
• 스크롤 박스 조작하기
• Canvas 요소에 그림 그리기 등

이럴 때는 DOM에 직접적으로 접근해야 한다고 합니다.

 

 

ref 사용

---

 

현재 상태에서 포커는 인풋 박스에 있다. 빨간색으로 밑줄 친 부분을 통해 확인할 수 있다. 이 상태에서 검증하기 버튼을 누르면 포커스가 버튼으로 이동하게 되는데요. 버튼을 누르더라도 포커스가 다시 인풋으로 돌아오게 할 수는 없을까요? 이럴 때 ref를 사용하면 됩니다.

 

ref를 사용하는 방법은 두 가지입니다.

1. 콜백 함수 사용

2. createRef 사용

 

 

콜백 함수를 통한 ref 설정

---

ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 됩니다.

<input ref={(ref) => {this.input=ref}} />

 

이 콜백 함수는 ref 값을 파라미터로 전달받습니다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 줍니다. 이렇게 하면 앞으로 this.input은 input 요소의 DOM을 가리킵니다.

 

실제로 input에 ref를 달아보도록 하겠습니다.

handleButtonClick = () => {
        this.setState({
            clicked: true,
            validated: this.state.password === '0000'
        })
        this.input.focus(); // (1) 포커스 주도록 설정
    }

render() {
        return (
            <div>
                <input
                    ref={(ref) => this.input=ref} // (2) ref 달기
                    type="password"
                    value={this.state.password}
                    onChange={this.handleChange}
                    onKeyPress={this.handleOnKeyPress}
                    className={this.state.clicked ? (this.state.validated ? 'success': 'failure') : ''}
                />
                <button onClick={this.handleButtonClick}>검증하기</button>
            </div>
        );
    }

 

이제 버튼을 누르더라도 포커스가 바로 인풋 박스로 이동하게 됩니다.

 

createRef를 통한 ref 설정

---

createRef를 사용하여 ref를 만들기 위해서는 우선 컴포넌트 내부에서 멤버 변수로 React.createRef()를 담아 주어야 합니다. 그리고 해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어 주면 ref 설정이 완료됩니다.

class RefSample extends Component {
    input = React.createRef();

    handleFocus = () => {
        this.input.current.focus();
    }

    render() {
        return (
            <div>
                <input ref={this.input} />
            </div>
        );
    }
}

createRef 관련 내용은 Hooks 을 다룰 때 정리하도록 하겠습니다.