4. ref:DOM에 이름 달기

일반 HTML에서 DOM요소에 이름을 달 때는 id를 사용하는데 리액트 프로젝트 내부에서도 ref를 통해 DOM에 이름을 달 수 있다. 리액트 컴포넌트에서 id를 사용하지 않는 이유는 컴포넌트를 반복적으로 사용하기 때문에 중복 id를 가진 dom이 여러 개 생기는 것을 방지하기 위해서이다.

 

ref는 특히 'DOM을 꼭 직접적으로 건드려야 할 때' 사용해야 한다. 

 

우선 state로 다음 기능을 구현해보자.

- App.js

import './App.css';
import ValidationSample from './ValidationSample';

function App() {
  return  <ValidationSample/>
};

export default App;

- ValidationSample.js

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

class ValidationSample extends Component {
  input = React.createRef();
  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.validated
                ? 'success'
                : 'failure'
              : ''
          }
        />
        <button onClick={this.handleButtonClick}>검증하기</button>
      </div>
    );
  }
}
export default ValidationSample;

- ValidationSample.css

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

틀리게 입력한 경우와 맞게 입력한 경우 서로 다른 css가 적용된다.

 

가끔 state만으로 해결할 수 없는 기능이 있다. 

- 특정 input에 focus 주기

- 스크롤 박스 조작하기

- 캔버스 요소에 그림 그리기

 

이 때 ref를 사용한다.

 

1 ) 콜백 함수를 통해 ref 설정하기

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

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

 

2 ) createRef 로 ref 설정하기

리액트에 내장되어 있는 createRef라는 함수를 사용할 수 있다. 그러면 더 적은 코드로 쉽게 사용할 수 있다.

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

class ValidationSample extends Component {
  input = React.createRef();
  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(); // 버튼 클릭 시 focus를 줄 수 있다.
  };
  render() {
    return (
      <div>
        <input
          ref = {(ref) => this.input = ref} // ref 를 달아준다. 
          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;

 버튼을 클릭한 뒤 포커스가 바로 input 으로 넘어가는것을 볼 수 있다.

 

3 ) 컴포넌트에 ref 달기

주로 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 쓴다. DOM에 ref를 다는 방법과 똑같다.

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

 

스크롤 박스가 있는 컴포넌트를 하나 만들고 스크롤바를 아래로 내리는 작업을 부모 컴포넌트에서 실행해보자.

-App.js

import { Component } from 'react';
import './App.css';
import ScrollBox from './ScrollBox';

class App extends Component {
  render(){
    return(
      <div>
        <ScrollBox />
      </div>
    );
  }
}

export default App;

- ScrollBox.js

import React, { Component } from 'react';
class ScrollBox extends Component {
  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;

 컴포넌트에 메서드를 달 수도 있다. 버튼을 클릭하면 스크롤바를 맨 아래쪽으로 내리는 메서드를 만들자.

- App.js

import { Component } from 'react';
import './App.css';
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.js

import React, { Component } from 'react';
class ScrollBox extends Component {
    scrollToBottom = () => {
        const { scrollHeight, clientHeight } = this.box;
        this.box.scrollTop = scrollHeight - clientHeight;
        }
  render() {...} // 위와 동일
}
export default ScrollBox;