[React 기초 다지기] Ref 사용하기

YUZAMIN
YUZAMIN
Hello, World! I'm YUZAMIN, a diligently endeavoring frontend developer 🐤💦
[React 기초 다지기] Ref 사용하기

Summary

Ref 사용하기

Ref란

  • render 메소드에 의해 생성된 DOM 노드나 리액트 엘리먼트에 접근하는 방법을 제공
    • HTML에서 DOM 요소에 접근하여 조작할 때에는 id를 사용
    • 리액트의 경우 ref가 DOM 요소에 직접 접근하여 조작하기 위한 이름표 역할을 수행
    • 전역적으로 작동하지 않으며 컴포넌트 내부에서만 유효함

Class Component에서의 ref 사용

전통적인 방식

1
2
3
4
5
6
7
8
9

input;

onRefInput = (c) => { this.input = c };

render() {
	return (
		<input ref={this.onRefInput} type="text" />
	)
}

발전된 방식

  • createRef()
    • 함수 컴포넌트와 유사한 방식으로 ref를 사용할 수 있는 방식 -> 더 쉽고 간단
1
2
3
4
5
6
7

inputRef = createRef();

render() {
	return (
		<input ref={this.inputRef} type="text" />
	)
}

Function Component에서의 ref 사용

  • useRef hook
    • useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않음
    • ref는 객체라서 객체의 속성이나 값이 바뀌어도 참조할 때마다 같은 메모리 주소를 가지기 때문에 리렌더링이 발생하지 않음
    • 즉, 바뀌어도 렌더링이 다시 일어나지 않기를 원하는 값들은 useRef를 사용하여 화면에 영향 끼치지 않을 수 있음
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React, { useState, useRef } from 'react'

const Component = () => {
  const inputRef = useRef()
  const number = useRef(0) // number.current의 초기값을 0으로 설정

  const increase = () => {
    number.current += 1 // 해당 함수가 실행되어 number.current의 값이 증가해도 리렌더링 일어나지 않음
  }
  return (
    <>
      <input ref={inputRef} type="text" />
      <div onClick={() => increase()}>숫자 증가</div>
    </>
  )
}

참고