[새싹x코딩온] 웹 개발자 부트캠프 과정 12주차 회고(1) | 리액트 ref

1. 이번 목표:
    ref에 대해 알아보자

 

2. 배운 내용 요약

리액트의 ref란?

ref는 React 컴포넌트나 DOM 요소에 직접 접근할 수 있도록 하는 기능.
일반적으로 상태(state)를 통해 UI를 제어하지만, 어떤 경우에는 DOM 요소에 직접 접근이 필요할 수 있다.
이런 경우에 ref 를 사용.

 

ref가 필요한 경우

1. 포커스, 텍스트 선택 관리
2. DOM 요소의 크기나 위치 확인
3. 비제어 컴포넌트 접근 (폼 요소 값 읽기)
4. 외부 라이브러리와의 통합

 

ref 사용 기본 문법

리액트에서 ref는 React.createRef() 또는 useRef()를 통해 생성.

- 클래스 컴포넌트에서 ref

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef(); // ref 생성
  }

  focusInput = () => {
    this.inputRef.current.focus(); // DOM 요소에 직접 접근하여 포커스
  };

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.focusInput}>Focus Input</button>
      </div>
    );
  }
}

export default MyComponent;

 

- 함수형 컴포넌트에서 ref (useRef)

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef(null); // ref 생성

  const focusInput = () => {
    inputRef.current.focus(); // DOM 요소에 직접 접근하여 포커스
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
};

export default MyComponent;

 

 

 

ref로 DOM 요소 크기 및 위치 확인

ref를 사용하면 DOM 요소의 크기와 위치를 확인할 수 있다.

 

import React, { useRef, useEffect } from 'react';

const Box = () => {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    console.log('Box Width:', box.offsetWidth);
    console.log('Box Height:', box.offsetHeight);
  }, []);

  return (
    <div ref={boxRef} style={{ width: '200px', height: '100px', backgroundColor: 'lightblue' }}>
      Box
    </div>
  );
};

export default Box;

 

 

비제어 컴포넌트로 폼 값 읽기

비제어 컴포넌트는 상태(state)로 폼 데이터를 관리하지 않고, ref를 통해 값에 접근.

import React, { useRef } from 'react';

const UncontrolledForm = () => {
  const nameRef = useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Name:', nameRef.current.value); // ref를 통해 값에 접근
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={nameRef} placeholder="Enter your name" />
      <button type="submit">Submit</button>
    </form>
  );
};

export default UncontrolledForm;

 

 

 

외부 라이브러리와의 통합

외부 라이브러리(예: 차트, 슬라이더)에서 DOM 요소에 직접 접근해야 할 때도 ref를 사용.

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const ctx = canvasRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [
          {
            label: '# of Votes',
            data: [12, 19, 3],
            backgroundColor: ['red', 'blue', 'yellow'],
          },
        ],
      },
    });
  }, []);

  return <canvas ref={canvasRef}></canvas>;
};

export default ChartComponent;

 

 

ref 사용 시 주의점

1. 너무 자주 사용하지 않기
   • React는 상태(state)로 UI를 관리하는 것이 더 적절.
2. ref를 통해 상태를 조작하지 않기
   • 상태 관리는 useState, useReducer로 하고, ref는 DOM 접근에만 사용.
3. 외부 라이브러리 사용 시 유용
   • 외부 라이브러리와 React 통합할 때 ref가 유용.

 

 

 

3. 회고

리액트의 ref에 대한 강의가 진행되었다. 이전에 부트캠프를 들을 때 useRef때문에 애먹었던 경험이 있어서 그런지 ref 글자만 보아도 무서움이 먼저 와닿았다. 프로젝트를 할 때 실시간 채팅 기능을 넣었는데 그 때 무한 역스크롤 기능을 넣으면서 사용자가 마지막으로 읽은 위치와 스크롤의 위치를 계산하여 렌더링하는 부분이 한 번에 이해가 가지 않아 많은 시행착오를 겪었던 적이 있다.
input에서의 마지막 값을 기억하기 위해 ref를 썼던 적도 있는 것 같은데 직접적으로 DOM 요소나 컴포넌트 인스턴트에 접근하여 제어하거나 값을 참조하는 만큼 리액트의 선언적 패턴을 우회하는 경우가 많기 때문에 꼭 필요한 경우에만 사용이 권장된다는 것을 이번에 알게 됐다.