React의 Ref

[farmeter]

ref란?

• DOM에 특정한 작업을 해줘야 할때 = DOM을 꼭 직접적으로 건드려야 할 때
• 예를 들면
  1. 특정 input에 포커스 주기
  2. 스크롤 박스 조작하기
  3. Canvas 요소에 그림 그리기 등
• 이렇게 어쩔수 없이 DOM에 직접적으로 접근해야 할때

ref가 필요없는 경우

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
                    type="password"
                    value={this.state.password}
                    onChange={this.handleChange}
                    className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
                  />
              <button onClick={this.handleButtonClick}>검증하기</button>
          </div>
          );
      }}

• input에서는 onChange이벤트가 발생하면 handleChange를 호출 -> state의 password를 업데이트 하도록
• input의 className 값은 버튼을 누르기 전에는 비어있는 문자열을 전달
• 버튼을 누른 후에는 검증결과에 따라 성공/실패 값을 설정. css 처리(ex. 초록, 빨강)

ref를 사용 하는경우

1. 기본적인 방법 : 콜백 함수를 사용하는 것

   • ref를 달고자 하는 요소에 ref 콜백함수를 props로 전달해주면 됨
   • 이 콜백 함수는 ref 값을 파라미터로 전달받아, 함수 내부에서 컴포넌트의 멤버 변수로 설정해줌.

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

   • this.input은 input 요소의 DOM을 가리킴
   • ref 이름은 자유롭게

2. 두번째 방법 - createRef를 사용

   • v16.3부터 지원

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

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

   render() { return (

   );

   } }

   
   - createRef를 사용하여 컴포넌트 내부에서 멤벼변수로 React.createRef()를 담아줌
   - 해당 멤버 변수를 ref를 달고자 하는 요소에 ref.proprs로 넣어줌
   - this.input.current를 조회하면 DOM에 접근 가능(콜백과는 달리.current를 넣어주어야 함)

컴포넌트에 ref 달기

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

MyComponent의 내부 메서드 및 멤버변수에 접근가능

class ScrollBox extends Component {
    render() {
        const style = {... } 
        const innerStyle ={...}

        scrollToBottom = () => {
            const { scrollheight, clientHeight } = this.box;
            this.box.scrollTop = scrollHeight - clientHeight;
        }

        return (
            <div
                style={style}
                ref={(ref) => {this.box=ref}}>
                <div style={innerStyle}/>
            </div>
        );
    }
}

..상위 App컴포넌트에서 사용할 때
<div>
    <ScrollBox ref={(ref) => this.scrollBox=ref} />
    <button onClick={() => this.scrollBox.scrollToBottom()}>
        맨 밑으로
        </button>
    ...

• onClick = {this.scrollBox.scrollToBottom}으로 해도 문법상 문제가 없으나,
  • 처음 컴포넌트가 렌더링 될 때 this.scrollBox이 undefined라 오류 발생 -() => 를 사용해서 버튼 누른 시점에서만 값을 읽어오도록 해야

정리

• 컴포넌트 내부에서 DOM에 직접 접근 해야 할때만 ref를 사용
• 컴포넌트간 데이터를 ref를 사용해서 전달하지 마라!
  • 데이터는 부모 <-> 자식 흐름으로 교류해야
• 함수컴포넌트의 useRef는 8장에서