React에서 useRef와 useEffect 사용하기

aksen5240·2024년 1월 8일

목록 보기

10/14

📚 React에서 useRef와 useEffect 사용하기

React 개발에서 useRef와 useEffect는 매우 강력한 훅(hook)들로, 애플리케이션의 효율성과 반응성을 크게 향상시킬 수 있다. 이 두 훅을 사용함으로써, DOM 요소에 직접적으로 접근하고, 컴포넌트의 생명주기에 맞춰 사이드 이펙트를 효과적으로 관리할 수 있게 된다.

이에, 이번 글을 통해 React의 useRef와 useEffect 훅을 사용하여 DOM 노드를 참조하고 사이드 이펙트를 관리하는 방법에 대해 알아보며 두 훅의 강력함에 대해 탐구해보고자 한다.

useRef를 사용한 DOM 노드 참조

📌 Ref 객체 생성

useRef Hook을 사용하여 Ref 객체를 만들 수 있으며, 이 Ref 객체는 DOM 요소에 직접적인 참조를 제공하는 역할을 한다.

이렇게 생성된 Ref 객체는 .current 프로퍼티를 통해 DOM 노드에 접근할 수 있게 해준다.

import { useRef } from 'react';

const ref = useRef();
useEffect(() => ref.current.focus(), []);

📌 ref Prop 사용

생성된 Ref 객체는 컴포넌트의 ref Prop에 할당하여 사용할 수 있다. 이를 통해 React는 해당 DOM 요소에 대한 참조를 Ref 객체에 연결 가능하다.

const ref = useRef();

// ...

<div ref={ref}> ... </div>

📌 Ref 객체에서 DOM 노드 참조하기

Ref 객체의 .current 프로퍼티를 사용하면 연결된 DOM 노드에 접근할 수 있다. 하지만 .current 값이 없을 수도 있으므로, 사용 전에 값의 존재를 검사하는 것이 권장된다.

이 방법은 React가 관리하는 상태가 아닌, 외부의 DOM 요소에 접근해야 할 때 특히 유용하니 이 부분도 참고하자.

const node = ref.current;
if (node) {
  // node 를 사용하는 코드
}

📌 예시: 이미지 크기 구하기

Ref를 사용하여 이미지의 크기를 구하는 예시를 살펴보며 Ref 객체에 대해 더욱 깊이 있게 이해해보자.

아래 예시는 img 태그에 Ref를 연결하고, 버튼 클릭 이벤트에서 해당 이미지의 크기를 콘솔에 출력하는 코드이다.

import { useRef } from 'react';

function Image({ src }) {
  const imgRef = useRef();

  const handleSizeClick = () => {
    const imgNode = imgRef.current;
    if (!imgNode) return;

    const { width, height } = imgNode;
    console.log(`${width} x ${height}`);
  };

  return (
    <div>
      <img src={src} ref={imgRef} alt="크기를 구할 이미지" />
      <button onClick={handleSizeClick}>크기 구하기</button>
    </div>
  );
}

📌 useFef의 유용성

앞서도 언급하였듯이, useRef는 React에서 DOM 요소에 직접 접근해야 할 때 매우 유용하다. 또한 이를 통해 React 외부의 DOM 요소를 조작하거나, 컴포넌트의 상태와 관련되지 않은 값을 관리할 수 있다.

이러한 이유로 특히 이미지나, 파일 등을 입력받거나 불러올 때 많이 사용되니 이 또한 참고해서 숙지하자.

useEffect를 사용한 사이드 이펙트 관리

📌 사이드 이펙트란?

사이드 이펙트는 컴포넌트의 순수 함수적인 동작 외부에 영향을 미치는 작업을 의미한다. 즉, 사이드 이펙트는 함수가 외부 상태에 영향을 끼치는 모든 작업을 의미한다고 할 수 있다.

예를 들어, 외부 변수를 변경하거나, 콘솔에 로그를 출력하는 것 모두 사이드 이펙트에 해당한다.

📌 사이드 이펙트와 useEffect

useEffect는 리액트 컴포넌트 함수 안에서 사이드 이펙트를 실행하고 싶을 때 사용하는 함수이다.

대표적인 예로, DOM 노드를 직접 변경한다거나, 브라우저에 데이터를 저장하거나, 네트워크 리퀘스트를 보내는 등 리액트 외부에 있는 데이터나 상태를 변경하는 사이드 이펙트를 실행하고 싶을 때 useEffect를 주로 사용한다.

useEffect에 대한 추가적인 내용은 다음 글을 통해 확인 가능하다: useEffect와 Fetch를 사용해 React에서 원격 데이터를 가져오는 법

📌 정리 함수 (Cleanup Function)

사이드 이펙트에 대한 정리가 필요한 경우, useEffect의 콜백 함수에서 정리 함수를 리턴할 수 있다. 정리 함수는 컴포넌트가 언마운트되거나, 새로운 사이드 이펙트가 실행되기 전에 호출되니 이 점을 숙지하여 사용하자.

Copy code
useEffect(() => {
  // 사이드 이펙트

  return () => {
    // 사이드 이펙트 정리
  };
}, [dependencies]);

ex> 정리함수 사용 예시

아래 예시는 useEffect를 사용하여 타이머를 설정하고 정리하는 코드이다. 아래 코드를 통해 올바르게 정리함수를 사용하는 방법에 대해 살펴보자.

import { useEffect, useState } from 'react';

function Timer() {
  const [second, setSecond] = useState(0);

  useEffect(() => {
    const timerId = setInterval(() => {
      setSecond((prevSecond) => prevSecond + 1);
    }, 1000);

    return () => clearInterval(timerId);
  }, []);

  return <div>{second}</div>;
}

📌 핸들러 함수 vs useEffect

React에서 핸들러 함수와 useEffect는 각기 다른 상황과 목적에 맞게 사용된다. 각각의 이점을 살펴본 후, 핸들러 함수와 useEffect를 비교하며 각각의 올바른 사용 사례에 대해 알아보자.

1. 핸들러 함수 사용의 이점

핸들러 함수는 사용자의 직접적인 상호작용(예: 버튼 클릭, 입력 변경)에 반응하여 즉각적인 동작을 수행하는 데 적합하다. 이는 사용자 이벤트에 대한 직관적이고 명시적인 처리를 가능하게 한다.

직접적인 제어: 사용자의 특정 행동에 대해 즉각적으로 반응하고 싶을 때
상태 변화의 명확한 트리거: 사용자 인터랙션에 의해 상태가 변경되는 것을 명확하게 표현할 수 있음

2. useEffect 사용의 이점

useEffect는 컴포넌트가 렌더링될 때 사이드 이펙트를 실행하는 데 사용된다. 이는 데이터의 로딩, 구독의 설정 및 해제와 같은 사이드 이펙트가 필요한 작업에 적합하다.

동기화와 사이드 이펙트 관리: 외부의 상태와 React 컴포넌트 상태 간의 동기화를 유지하거나, 렌더링과 관계없이 실행되어야 하는 로직에 적합
선언적 접근: 의존성 배열을 통해 컴포넌트의 상태나 props에 따라 사이드 이펙트가 언제 실행될지 정의할 수 있음

3. 핸들러 함수와 useEffect의 비교

핸들러 함수와 useEffect는 각각의 사용 사례에 따라 선택해야 한다.

각각의 이점을 통해 살펴본 내용을 정리하여 권장되는 사용 사례에 대해 살펴보자면, 먼저 사용자의 직접적인 인터랙션에 의한 상태 변경이 필요하다면 핸들러 함수를, 컴포넌트의 상태 변화와 외부 상태의 동기화가 필요한 경우 useEffect를 사용하는 것이 바람직하다. 여기서 동기화는 컴포넌트 안에 데이터와 리액트 바깥에 있는 데이터를 일치시키는 걸 말한다.

특히, useEffect는 '동기화'에 쓰면 유용한 경우가 많다는 점을 꼭 기억하자. useEffect는 사이드 이펙트를 일으키는 코드를 한 곳에 모으고, 의존성 배열을 통해 언제 이 사이드 이펙트를 실행할지 명확하게 정의할 수 있도록 도와준다. 따라서 useEffect는 외부 상태와의 동기화를 필요로 하는 상황에서 특히 강력한 도구로 사용 가능한 것이다.

Outro

이번 글을 통해 useRef와 useEffect는 React에서 각각 DOM 노드에 접근하고 사이드 이펙트를 관리하는 데 필수적인 훅이라는 사실을 알 수 있었다.

두 훅의 사용법을 숙지하여, 앞으로의 개발에서 이를 효과적으로 활용하여 useRef와 useEffect의 이점들을 모두 가져갈 수 있도록 나아가자.

aksen5240

Tags of MyStudy🌱

이전 포스트

React에서는 입력폼을 어떻게 다룰까?

다음 포스트