React 공부하기 5 - Reference

Reference (Ref)

특정 DOM요소에 작업을 하기 위해서 id를 부여하는 것 처럼, React에서 DOM에 이름을 다는 방식이 있는데 이것이 바로 ref (Reference)다. 반드시, DOM에 직접적으로 접근하여 조작이 필요할 때 만 이용해야 한다.

컴퍼넌트 내부에서 사용

import React, { 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 = () => {
    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.validated
                ? 'success'
                : 'failure'
              : ''
          }
        ></input>
        <button onClick={this.handleButtonClick}>Validation</button>
      </div>
    )
  }
}

export default ValidationSample

중요하게 봐야할 부분은 바로 여기

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

ref 속성을 추가할 때는 props를 설정하듯이 하면 된다. ref 값으로는 콜백 함수를 전달하는데, 이 콜백함수는 ref를 파라미터로 가지며 함수 내부에서 멤버변수에 ref를 담으면 된다. 여기에서는 this.input에 담았다.

this.input.focus()를 통해서 input 태그에 포커스를 달았다.

컴포넌트에 Ref 달기

import React, { Component } from 'react'

class ScrollBox extends Component {
  scrollToBottom = () => {
    const { scrollHeight, clientHeight, width } = this.box
    this.box.scrollTop = scrollHeight - clientHeight
  }

  render() {
    const style = {
      border: '1px solid black',
      height: '300px',
      width: '300px',
      overflow: 'auto',
      position: 'relative',
    }

    const innerStyle = {
      width: '100%',
      height: '650px',
      background: 'linear-gradient(white, black)',
    }

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

export default ScrollBox

import React, { Component } from 'react'
import ScrollBox from './ScrollBox'

class App extends Component {
  render() {
    return (
      <div>
        <ScrollBox
          ref={(ref) => {
            this.scrollBox = ref
          }}
        />
        <button
          onClick={() => {
            this.scrollBox.scrollToBottom()
          }}
        >
          맨밑으로
        </button>
      </div>
    )
  }
}

export default App

ScrollBox에서 scrollToBottom 함수를 정의했다. 그리고 ScrollBox 컴포넌트를 this.scrollBox로 ref를 부여하여 다른 DOM에서 해당 함수를 호출 할 수 있었다.