[React를 다루는 기술] 5장 - ref: DOM에 이름 달기

😉 ref란?

• HTML에서 id를 사용하는 상황에서 사용하는 react의 개념
• 특정 DOM을 꼭 직접적으로 건드려야 할 때 사용 (사용이 권장되지 않음.)
  • 리액트 컴포넌트 안에서도 id를 사용할 수 있지만, HTML에서 DOM의 id는 유일해야하는데, 컴포넌트가 여러 번 사용되면 중복 id가 생기니 잘못된 사용이다. ref는 전역적으로 작동하지 않고, 컴포넌트 내부에서만 작동하기 때문에 문제가 발생하지 않는다.
• ref가 필요한 구체적인 예
  1. 특정 input에 포커스 주기
  2. 스크롤 박스 조작하기
  3. Canvas 요소에 그림 그리기 등

🐱‍🐉 컴포넌트에 ref 달기

• 리액트에서는 컴포넌트에도 ref를 달 수 있다. 이렇게 하면 컴포넌트 내부에 있는 DOM 을 컴포넌트 외부에서 사용할 수 있다.

import React from "react";
import ScrollBox from "./ScrollBox";

export default function App () => {
  render() {
    return (
      <div className="App">
        <ScrollBox ref={(ref) => (this.scrollBox = ref)} />
        <button onClick={() => this.scrollBox.scrollToBottom()}>
          끝으로 이동
        </button>
      </div>
    );
  }
}

import React from 'react';

export default function ScrollBox () {
    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;