ref의 개념

우리가 일반적으로 HTML에서 DOM요소에 이름을 달 때는 id 를 사용함

<div id="divTag"></div>

그러나 JSX 내부에서는 권장하지 않음 id는 유일한 요소여야하는데 중복 id가 여러개 생김

ref는 특정 DOM작업을 할 때 사용함
언제? DOM을 직접 건드려야할 때

DOM을 꼭 사용해야하는 상황?(ref 사용하는 순간)

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

그렇다면 red는 어떻게 사용하는가?

방법은 두가지임

1. 콜백함수를 통한 ref설정
   ref를 달호자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 됨

<input ref={(ref) => {this.input=ref}}/>
//this.이름자유롭게 = ref

2. createRef를 통한 ref설정

v16.3부터 적용됨

//(코드생략)
input = React.createRef();

//(핸들러 코드생략)
this.input.current.focus();

//render 함수 내부

<input ref={this.input} />

콜백함수를 사용할 때와 차이점? .current를 넣어주어야함

컴포넌트에 ref달기
이방법은 주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 사용함

// 예시 코드

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

class ValidationSample extends Component {

    state = {
        password : '',
        clicked : false,
        validated : false
    }

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

    handleButtonClick = (e) => {
        this.setState({
            clicked: true, 
            validated: this.state.password === '0000'
        });
        this.input.focus(); //ref 사용시 코드추가 (2)
    }


    render() {
        return (
            <div>
                <input ref={(ref) => this.input = ref}  //ref 사용시 코드추가 (2)
                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 ValidationSample;

컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모 <-> 자식 흐름으로 교류해야함