5장. ref : DOM 에 이름 달기

# ref?

HTML 에서 id 를 사용하여 DOM 에 이름을 다는것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는방법이 있다. 이것이 바로 ref(reference 줄임말) 개념이다.

 

리액트 컴포넌트 안에서는 id를 사용하면 안되나요?
👉 리액트 컴포넌트 안에서도 id 사용할수 있습니다. JSX 안에서 DOM에 id를 달면 해당 DOM을 렌더링할 때 그대로 전달합니다.
하지만 특수한 경우가 아니면 권장하지는 않습니다. ref는 전역적으로 작동하지 않고 컴포넌트 내부에서만 작동하기 때문에 문제는 생기지 않습니다. 

# 그럼 ref는 어떤 상황에서 사용해야 할까?

 정답은 'DOM을 꼭 직접적으로 건드려야 할 때' 입니다. 예를 들어, 일반 순수 자바스크립트로 및 jQuery로 만든 웹 사이트에서 input을 검증 할 때는 다음과 같이 특정 id를 가진 input 에 클래스를 설정할때 사용합니다.

 

import {Component} from 'react';
import './ValidationSample.css';

class ValidationSample extends Component {
	state = {
    	passwrod : ''.
        clicked : false,
        vaildated : 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.validated ? 'success' : 'failure' : ''}
        />
        	<button onClick = {this.handleButtonClick}>검증하기</button>
        </div>
        );
       }
      }
      export default VaildationSample;

👉 input 에서는 onChange 이벤트가 발생하면 handleChange 를 호출하여 state 의 password 값을 업데이트 합니다.

button 에서는 onClick 이벤트가 발생시 handleButtonClick 을 호출해 clicked 값을 참으로 설정 후 vaildated 값을 검증 결과로 설정 합니다. input 의 className 값은 버튼을 누르기 전에는 비어 있는 문자열을 전달하며, 버튼을 누른 후에는 검증 결과에 따라 success / failure 값을 설정합니다. 이 값에 따라 빨간색 / 초록색을 나타냅니다.

# DOM을 꼭 사용해야 하는 상황

state를 사용하여 우리에게 필요한 기능을 구현했지만, 가끔 state 만으로 해결할 수 없는 기능이 있습니다.

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

이런 경우에는 DOM에 직접적으로 접근해야하는데, 이를 위해 ref 를 사용합니다.

 

# 콜백 함수를 통한 ref 설정

ref를 만드는 가장 기본적인 방법은 콜백 함수를 사용하는 것입니다. ref를 달고자 하는 요소에 ref 라는 콜백 함수를 props로 전달해 주면 됩니다. 이 콜백 함수는 파라미터로 전달받고, 파라미터로 받은 ref는 컴포넌트의 멤버 변수로 설정해줍니다.

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

👉 이렇게 하면 this.input 은 input 요소의 DOM을 가리킵니다. ref 의 이름은 원하는 것으로 자유롭게 저장 할 수 있습니다.

# createRef를 통한 ref 설정

ref를 만드는 또 다른 방법은 리액트를 내장되어 있는 createRef 라는 함수를 사용하는 것 입니다. 이 함수를 사용해서 만들면 더 적은 코드를 쉽게 사용 할 수 있습니다. 

import {Component} from 'react';

class RefSample extends Component {
	input = React.createRef();
    
    handleFocus = () => {
     this.input.current.focus();
    }
    render() {
    	return (
        	<div>
            	<input ref = {this.input} />
            </div>
          };
         }
       }

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

설정한 뒤 나중에 ref 설정 해 준 DOM 에 접근 시 this.input.current를 조회하면 됩니다. 콜백 함수와 다른점은 뒷부분에 .current 를 넣어주어야 합니다.

 

# 컴포넌트에 ref 달기

리액트에서는 컴포넌트에도 ref 를 달 수 있습니다. 이 방법은 주로 컴포넌트 내부에 있는 DOM 을 컴포넌트 외부에서 사용할 때 씁니다.

방법은 DOM에 ref 를 다는 방법과 같습니다.

<MyComponent
	ref = {(ref) => {this.myComponent=ref}}
/>

# 정리

컴포넌트 내부에서 DOM 을 직접 접근할 때는 ref 사용

주의사항으로는 ref를 먼저 사용하지 말고, 원하는 기능을 구현 할 수 있는지 반드시 확인하고 사용하자!

예를 들면, 서로 다른 컴포넌트끼리 데이터를 교류할때 ref 를 사용한다면 그것은 잘못된것입니다.

 

컴포넌트끼리 데이터를 교류할 시에는. 언제나 데이터를 부모 - 자식 관계 흐름으로 이어가야합니다.

함수 컴포넌트에선 useRef 라는 Hook 함수를 사용합니다. React.createRef 와 매우 유사합니다.