멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 81 (리액트에서 DOM 참조 다루기, 클래스 컴포넌트의 Ref)

 

목차

• 리액트에서 DOM 참조 다루기
• 클래스 컴포넌트의 Ref
• 오늘 하루를 돌아보며

 

리액트에서 DOM 참조 다루기

리액트는 가상 DOM을 사용해 효율적으로 UI를 관리하지만, 특정 상황에서는 실제 DOM 요소에 직접 접근해야 한다. 이럴 때 useRef 훅을 사용한다. DOM 참조의 주요 사용 사례는 다음과 같다.

• 초점/스크롤 제어: 특정 인풋 요소에 자동으로 초점을 맞추거나, 특정 섹션으로 스크롤을 이동시킬 때 사용한다.
• 외부 라이브러리 연동: Canvas Confetti, Vanilla Tilt, GSAP 등 DOM을 직접 조작하는 외부 라이브러리와 함께 사용할 때 필요하다.
• 미디어 제어: <video>, <audio>와 같은 HTML 미디어 요소를 재생하거나 일시 정지하는 등 직접 제어할 때 사용한다.
• Canvas 제어: <canvas> 요소에 그림을 그리는 것과 같이, 브라우저 API를 사용해야 할 때 필요하다.

 

클래스 컴포넌트의 Ref

함수형 컴포넌트에서 useRef를 사용하는 것처럼, 클래스 컴포넌트에서는 createRef를 사용해 DOM에 대한 참조를 생성한다. 클래스 컴포넌트의 인스턴스 멤버로 this.myRef = createRef()와 같이 참조 객체를 만들 수 있고, ref 속성을 통해 DOM 요소와 연결한 후, this.myRef.current로 실제 DOM에 접근할 수 있다.

import { createRef, Component } from 'react'

export default class AutoFocusInput extends Component {
  inputRef = createRef()

  componentDidMount() {
    if (this.props.shouldFocus) {
      this.inputRef.current.focus()
    }
  }
  
  render() {
    return (
      <div>
        <label htmlFor="nameInput">{this.props.label}</label>
        <input ref={this.inputRef} id="nameInput" placeholder="자동 초점" />
      </div>
    )
  }
}

 

오늘 하루를 돌아보며

오늘부터 타입스크립트로 마이그레이션했다. 지난 금요일 생성했던 파일에 있는 모든 자바스크립트 파일을 타입스크립트로 변경했다. 타입 오류가 생기는 모든 부분을 수정하면서 타입스크립트의 타입 안정성에 대해 배웠다.

 

프로젝트가 커지고 팀원이 많아질수록 모든 코드를 기억하거나 실수를 찾는 것이 어려워진다. 이때 코드 가독성, 좋은 도구, 그리고 실수를 감지하는 안전 장치가 매우 중요하다. 특히 타입 안전 장치가 없다면, 버그를 찾고 예방하는 일이 훨씬 어려워진다. 자바스크립트는 동적 언어라 타입 관련 버그가 런타임에 발생하기 쉽기 때문이다.

 

리액트에서 타입 안전을 높이기 위해 타입스크립트를 사용할 수 있다. 타입스크립트는 코드 작성 시점에 정적 타입 체크를 통해 잠재적인 오류를 미리 발견하도록 돕는다. 리액트 프로젝트에 타입스크립트를 적용하면 코드의 버그를 줄여 안정적인 애플리케이션을 만들 수 있다.