ref:DOM(클래스형컴포넌트)

ref

• HTML에서 각 DOM요소에 이름을 달아줄때에는 id를 사용한다. ex) <div id='box' />
• 이와 비슷하게 React에서도 DOM에 이름을 달아주는데 이 때, ref를 사용한다.

DOM요소에 ref달기

예제 컴포넌트

// ValiSample.css
.success {
    background-color: lightgreen;
}

.failure {
    background-color: lightcoral;
}

// ValiSample.js
import React, { Component } from 'react';

import './ValiSample.css';

class ValiSample extends Component {
    state = {
        password: '',
        clicked: false,
        validated: false
    }

    handelChange = (e) => {
        this.setState({
            password: e.target.value
        });
    }
    handelButtonClick = () => {
        this.setState({
            clicked: true,
            validated: this.state.password === '0000'
        });
    }

    render() {
        return (
            <div style={{ margin: '10px 0 0 50px' }}>
                <h2>ref:DOM</h2>
                <input
                    type='password'
                    value={this.state.password}
                    onChange={this.handelChange}
                    className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
                />
                <button style={{ margin: '0 0 0 10px' }} onClick={this.handelButtonClick}>검증하기</button>
            </div>
        )
    }
}

export default ValiSample;

위 예제는 비밀번호 입력시 검증하는 코드이다.

위 예제에서 ref를 사용해 볼 것이다.

ref사용

import React, { Component } from 'react';

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

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

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

export default RefSample;

위 코드를 만든 후 'ValiSample.js'에서

handelButtonClick = () => {
  this.setState({
    clicked: true,
    validated: this.state.password === '0000'
  });
  this.input.focus();
}

<input
  ref={(ref) => this.input = ref}  
  type='password'
  value={this.state.password}
  onChange={this.handelChange}
  className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
 />

위 부분들을 수정해주면 비밀번호 입력 후 버튼을 클릭하면 포커스가 입력창으로 이동한다.

컴포넌트에 ref달기

import React, { Component } from 'react';

class ScrollBox extends Component {

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

        this.box.scrollTop = scrollHeight - clientHeight;
    }

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

        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 style={{ margin:'10px 0 0 50px' }}>
                {/* <ScrollBox /> */}
                <ScrollBox ref={(ref) => this.scrollBox = ref}  />
                <button onClick={() => this.scrollBox.scrollToBottom()}>맨밑으로</button>
            </div>
        )
    }
}

export default App;