React) 5장 ref:DOM에 이름 달기

ref: DOM에 이름 달기

 

ref는 어떤 상황에 사용해야 하나?

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

리액트에서는 굳이 DOM에 접근하지 않고 state로 구현가능하다.

 

DOM을 꼭 사용해야 하는 상황

(state로 해결 불가능한 상황)

1. 특정 input 포커스 주기

2. 스크롤 박스 조작하기

3. Canvas요소에 그림 그리기

 

 

ref사용

사용 방법은 두가지가 있다.

 

1. 콜백 함수를 통한 ref 설정

가장 기본적인 방법으로, ref를 달고자 하는 요소에 ref라는 콜백함수를 props로 전달한다

(콜백 함수안 this.____ 에서 ____에 들어갈 ref 이름 설정이 자유롭다.)

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

 

2. creatRef를 통한 설정

리액트 내장 함수인 creatRef를 이용해 더 적은 코드로 쉽게 사용가능하다.

컴포넌트 내부 멤버 변수로 React.creatRef()를 담아주고

해당 멤버 변수를 ref를 달고자 하는 요소에 ref props로 넣어주면 된다.

설정후 접근시 this.이름.current를 이용해 접근한다.

class ScrollBox extends Component{
...
  input = React.createRef();	//	React.createRef()를 컴포넌트 내부 멤버 변수로 담음

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

 

 

컴포넌트에 ref 달기

리액트에서는 컴포넌트에도 ref를 달 수 있다.

이 방법은 컴포넌트 내부에 있는 DOM을 컴포넌트 외부에서 사용할 때 사용한다.

사용법)

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

myComponent 내부 메서드 및 멤버 변수에도 접근이 가능하다.

즉, 내부 ref에도 접근이 가능하다.

 

Scroll.js

import React from 'react';
import { Component } from 'react';

class ScrollBox extends Component{
  //스크롤을 맨 아래로 내리는 함수 (scrollTop, scrollHeight, clientHeight를 이용한다.)
  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',
    }

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

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

export default ScrollBox;
//App4.js와 연결됨

App.js

import React, { Component } from 'react';
import ScrollBox from '../REF/ScrollBox_class&callbackType';

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

}
export default App;

 

 

정리

ref사용이 필요한지 확인하고 사용하자

필요 없다면 사용하지 말자(되려 복잡해짐)

컴포넌트간 정보교환은 부모⇌자식 흐름으로 진행 되야된다.

함수형 컴포넌트에서 ref는 useRef를 사용하므로 8장에서 다룬다.