옝옹
냠
옝옹
전체 방문자
오늘
어제
  • 분류 전체보기 (84)
    • [LG유플러스]유레카 SW (5)
    • React (20)
    • JS (17)
    • TypeScript (5)
    • CSS & HTML (1)
    • 알고리즘 (11)
    • JAVA (20)
    • GIT (1)
    • 자격증 (4)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • TypeScript
  • toFixed
  • sort() 메서드
  • fillter
  • 타입스크립트
  • 자바스트립트
  • 기본api클래스
  • useEffect
  • 화살표함수
  • map
  • 자바
  • join()
  • 함수선언
  • do-while문
  • 코드스플리팅
  • 노마드코더
  • 리액트
  • 리액트를다루는기술
  • 타입변환
  • While문
  • JavaScript
  • useMemo
  • useState
  • break문
  • 정적멤버
  • java.util패키지
  • reverse() 메서드
  • 템플릿리터럴
  • match()
  • 혼자공부하는자바
  • java.lang패키지
  • indexOf()
  • useRef
  • 혼자 공부하는 자바
  • ==
  • 접근제한자
  • template literal
  • join() 메서드
  • java
  • map() 함수
  • js
  • continue문
  • 자바스크립트
  • 인스턴스멤버
  • 변수선언
  • Node.js
  • 백준
  • switch문
  • reduce
  • useCallback

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
옝옹

냠

[React] ref : DOM에 이름 달기
React

[React] ref : DOM에 이름 달기

2023. 3. 16. 15:27

클래스형 컴포넌트에서 ref를 사용하는 방법

  • 함수 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 함
리액트에서 잘 사용하는 문법은 아니라 간략히 정리

DOM을 꼭 사용해야하는 상황

  • 특정 input에 포커스 주기
  • 스크롤 박스 조작하기
  • Canvas 요소에 그림 그리기

ref 사용

1. 콜백 함수 사용

  • ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달
  • 이 콜백 함수는 ref 값을 파라미터로 전달 받음
  • 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정
<input ref = {(ref) => {this.input = ref}} />

2. createRef 사용

  • 더 적은 코드로 쉽게 사용가능
  • 리액트 v16.3부터 도입
import React, { Component } from "react";

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

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

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

export default createRef;

컴포넌트에 ref 달기

<MyComponent
	ref = {(ref) => {this.myComponent = ref}} />
  • 이렇게 하면 MyComponent 내부의 메서드 및 멤버 변수에도 접근 가능

컴포넌트에 메서드 생성 → 컴포넌트에 ref 달고 내부 메서드 사용

// ScrollBox.js
import { Component } from 'react';

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

export default ScrollBox;
// App.js
import React, { Component } from "react";
import ScrollBox from "./ref/ScrollBox";

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

export default App;
저작자표시 비영리 변경금지 (새창열림)

'React' 카테고리의 다른 글

[React] 컴포넌트의 라이프사이클 메서드  (1) 2023.03.23
[React] 컴포넌트 반복  (1) 2023.03.21
[React] 이벤트 핸들링  (0) 2023.03.16
[React] 컴포넌트  (1) 2023.03.16
[React] Virtual DOM  (0) 2023.01.16
    'React' 카테고리의 다른 글
    • [React] 컴포넌트의 라이프사이클 메서드
    • [React] 컴포넌트 반복
    • [React] 이벤트 핸들링
    • [React] 컴포넌트
    옝옹
    옝옹

    티스토리툴바