5. ref: DOM에 이름달기

HTML에서 DOM 요소에 id를 달아 사용하듯 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 그것이 바로 ref(reference의 줄임말) 개념이다.

👀리액트 컴포넌트 안에서는 id를 사용하면 안 되는 걸까?
**물론 사용할 수 있지만, 특수한 경우가 아니면 권장하지 않는 사용방법이다. 컴포넌트를 여러 개 
생성해야 할 때 id의 특성상 DOM에서 유일해야 하는데 중복된 id를 가지게 될 경우를 방지하기 위해서다. 
ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 이런 문제가 생기지 않는다.

5-1. ref를 사용하는 상황

ref를 사용하는 상황은 'DOM을 꼭 직접적으로 건드려야 할 때'이다. 예를 들어 input을 검증할 때는 input에 특정 id를 설정해주는데, 리액트에서는 이런 작업은 굳이 DOM에 접근하지 않아도 state로 구현할 수 있다. 이번 장에서는 클래스형 컴포넌트만 해볼것이다. 함수 컴포넌트에서는 ref를 사용하려면 Hooks를 사용해야 하기 때문이다. 그것은 Hooks단원에서 해볼것이다.

state만으로 해결해보기

✔css파일

.success {
	background-color: lightgreen;
}
.failure {
	background-color: lightcoral;
}

✔js파일

import React, { Component } from 'react';
import './ValidationSample.css'; //만들어둔 css파일 임포트시키기

class ValidationSample extends Component {
	state ={
    	password: '',
      	clicked: false,
      	validated: false
    }

	handleChange = (e) => {
    	this.setState({
        	password: e.target.value
        });
    }
    
    handleButtonClick = () => {
    	this.setState({
        	clicked: true,
          	validated: this.state.password === '0000'
        })
    }
    
    render() {
        return (
            <div>
                <input
                    type="password"
                    value={this.state.password}
                    onChange={this.handleChange}
                    className={this.state.clicked ? 
                               (this.state.validted ? 'success' : 'failure') :
                               ''}
                />
                <button onClick={this.handleButtonClick}>검증하기</button>
            </div>
        );
    }
}

input의 className 값은 버튼을 누르기 전에는 비어 있는 문자열을 전달하고, 버튼을 누른 후에 검증 결과에 따라 success값 또는 failure 값이 설정되도록 했다. 값에따라 css파일에 적용한 스타일링이 적용된다. 해당 코드는 state를 사용하여 필요기능을 구현했지만 state만으로 해결할 수 없는 기능이 있다. 그럴땐 DOM을 사용해야 한다.

돔을 꼭 사용해야 하는 상황

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

이런 상황에서는 DOM에 직접 접근을 하기 위해 ref를 사용한다.

5-2. ref 사용하기

ref를 사용하는 방법에는 두가지가 있다.

• 콜백 함수를 통한 ref 설정

  ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해 주면된다. 이 콜백 함수는 ref값을 파라미터로 전달받는다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해준다.

• createRef를 통한 ref 설정

  리액트에 내장되어 있는 creareRef함수를 사용하는 것이다. 이 함수를 사용해서 만들면 더 적은 코드로 쉽게 사용할 수 있다. 버전16.3부터 도입되었으므로 이전 버전에서는 작동하지 않는다.

주로 사용되는 콜백함수를 사용하는 방식으로 위 코드를 수정해보겠다.

✔js파일

import React, { Component } from 'react';
import './ValidationSample.css'; //만들어둔 css파일 임포트시키기

class ValidationSample extends Component {
	state ={
    	password: '',
      	clicked: false,
      	validated: false
    }

	handleChange = (e) => {
    	this.setState({
        	password: e.target.value
        });
    }
    
    //코드수정!
    handleButtonClick = () => {
    	this.setState({
        	clicked: true,
          	validated: this.state.password === '0000'
        });
      	this.input.focus();
    }
    
    render() {
        return (
            <div>
                <input
          			ref={(ref) => this.input=ref} //추가되는 부분
                    type="password"
                    value={this.state.password}
                    onChange={this.handleChange}
                    className={this.state.clicked ? 
                               (this.state.validted ? 'success' : 'failure') :
                               ''}
                />
                <button onClick={this.handleButtonClick}>검증하기</button>
            </div>
        );
    }
}

컴포넌트 내부에서 DOM에 직접 접근해야 할 때는 ref를 사용한다. 하지만 먼저 ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 바드시 고려후에 활용해야한다. 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모<->자식 흐름으로 교류해야 한다.

리액트를 다루는 기술을 읽고 요약한 글 입니다😊