[LG CNS AM Inspire Camp] 6. React의 Ref와 상태 관리 최적화

1. Ref란? 왜 필요한가?

React에서 ref는 DOM 요소나 React 컴포넌트에 대한 참조를 생성하고 관리하는 데 사용되는 특별한 속성입니다. 보통 다음과 같은 경우에 활용됩니다.

• 특정 DOM 요소에 직접 접근해야 할 때
• 입력 필드의 포커스를 조정할 때
• 애니메이션을 실행할 때
• 서드파티 라이브러리와 연동할 때

일반적으로 React에서는 상태(state)를 사용하여 UI를 업데이트하지만, ref는 상태를 변경하지 않고도 DOM 요소를 직접 제어할 수 있어 불필요한 리렌더링을 방지하는 데 유용합니다.

1.1. createRef()를 이용한 ref 사용법

import { Component, createRef } from "react";

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = createRef();
  }

  focusInput = () => {
    this.myRef.current.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.myRef} type="text" placeholder="입력하세요" />
        <button onClick={this.focusInput}>포커스 이동</button>
      </div>
    );
  }
}

export default MyComponent;

위 코드에서는 createRef()를 이용하여 this.myRef를 생성하고, 버튼 클릭 시 해당 입력창에 포커스를 이동할 수 있도록 했습니다. ref를 사용하면 직접적인 DOM 접근이 가능하므로, 상태 변화 없이 특정 요소에 대한 조작이 가능합니다.

1.2. 콜백 Ref를 이용한 방식

import { Component } from "react";

class MyComponent extends Component {
  setRef = (element) => {
    this.myRef = element;
  };

  focusInput = () => {
    this.myRef.focus();
  };

  render() {
    return (
      <div>
        <input ref={this.setRef} type="text" placeholder="입력하세요" />
        <button onClick={this.focusInput}>포커스 이동</button>
      </div>
    );
  }
}

export default MyComponent;

콜백 함수를 이용하면 ref를 동적으로 할당할 수 있어 createRef()보다 유연하게 사용할 수 있습니다.

2. useRef()와 함수형 컴포넌트에서의 활용

함수형 컴포넌트에서는 useRef()를 사용하여 DOM 요소를 직접 참조할 수 있습니다.

import { useRef } from "react";

function MyComponent() {
  const myRef = useRef(null);

  const focusInput = () => {
    myRef.current.focus();
  };

  return (
    <div>
      <input ref={myRef} type="text" placeholder="입력하세요" />
      <button onClick={focusInput}>포커스 이동</button>
    </div>
  );
}

export default MyComponent;

useRef()를 사용하면 값이 변경되어도 컴포넌트가 리렌더링되지 않는다는 점이 특징입니다. 따라서 상태를 관리할 필요 없이 특정 요소를 참조하는 경우 유용하게 활용할 수 있습니다.

3. Ref를 활용한 UI 개선

3.1. 패스워드 검증 예제

import { useState, useRef } from "react";

function PasswordChecker() {
  const [password, setPassword] = useState("");
  const [isValid, setIsValid] = useState(null);
  const inputRef = useRef(null);

  const checkPassword = () => {
    if (password === "0000") {
      setIsValid(true);
    } else {
      setIsValid(false);
      inputRef.current.focus();
    }
  };

  return (
    <div>
      <input 
        type="password" 
        ref={inputRef} 
        value={password} 
        onChange={(e) => setPassword(e.target.value)} 
        style={{ backgroundColor: isValid === null ? "white" : isValid ? "blue" : "red" }}
      />
      <button onClick={checkPassword}>패스워드 검증</button>
    </div>
  );
}

export default PasswordChecker;

위 예제에서는 패스워드를 입력한 후 확인 버튼을 누르면 검증이 이루어지며, 틀린 경우 ref를 이용해 입력창에 자동으로 포커스를 맞추도록 했습니다. 이를 통해 사용자의 편의성을 높일 수 있습니다.

4. ScrollBox 예제 - Ref 활용

import { useRef } from "react";

function ScrollBox() {
  const boxRef = useRef(null);

  const scrollToBottom = () => {
    boxRef.current.scrollTop = boxRef.current.scrollHeight;
  };

  const scrollToTop = () => {
    boxRef.current.scrollTop = 0;
  };

  return (
    <div>
      <div ref={boxRef} style={{ border: "1px solid black", height: 300, width: 300, overflow: "auto" }}>
        <div style={{ height: 650, background: "linear-gradient(white, black)" }}></div>
      </div>
      <button onClick={scrollToTop}>맨 위로 이동</button>
      <button onClick={scrollToBottom}>맨 아래로 이동</button>
    </div>
  );
}

export default ScrollBox;

이 예제에서는 ref를 활용하여 특정 영역을 스크롤하는 기능을 추가했습니다. scrollTop과 scrollHeight를 활용하면 버튼 클릭 시 최상단 또는 최하단으로 스크롤할 수 있습니다.

5. 마무리

이번 강의를 통해 React에서 ref를 활용하는 다양한 방법을 익혔습니다. ref는 직접 DOM 요소를 제어할 수 있어 특정 UI 조작에 유용하게 쓰이며, 특히 포커스 이동, 애니메이션, 서드파티 라이브러리 연동 등에 큰 도움이 됩니다.

또한, 불필요한 리렌더링을 방지하면서 특정 값이나 DOM 요소를 참조할 때 useRef()가 매우 유용하다는 점을 배웠습니다. 앞으로 프로젝트에서 ref를 적극적으로 활용하여 효율적인 UI를 구현하는 데 도움을 받을 수 있을 것 같습니다.

 

---

이 글은 LG CNS AM Inspire Camp 1기 진행 중 Obsidian에 정리해뒀던 글을 블로그에 옮긴 글입니다.