useRef

useRef는 리액트 함수형 컴포넌트에서 DOM 요소나 일반 값을 저장할 때 쓴다.

특히 렌더링과 무관하게 값을 유지하고 싶을 때 유용하다.

함수형 컴포넌트는 렌더링 될 때마다 함수가 다시 실행되기 때문에, 변수를 그냥 선언하면 값이 초기화된다.

하지만 useRef를 사용하면 컴포넌트가 재렌더링돼도 값이 유지된다.

또, DOM에 직접 접근해야 할 때도 useRef를 쓴다.

jsx
복사편집
import React, { useRef } from 'react';

function InputFocus() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <><input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>포커스 주기</button>
    </>
  );
}

inputEl은 useRef로 만든 참조 객체다.

input 요소에 ref={inputEl}를 붙여서 DOM을 연결한다.

버튼을 누르면 inputEl.current.focus()가 실행돼 input에 포커스된다.

useEffect

useEffect는 리액트 컴포넌트가 렌더링될 때 특정 작업을 수행할 수 있게 해주는 훅이다.

클래스 컴포넌트의 라이프사이클 메서드를 대체한다.

컴포넌트가 처음 나타날 때, 상태나 props가 바뀔 때, 또는 컴포넌트가 사라질 때 특정 작업을 해야 한다.

이런 사이드 이펙트를 관리하기 위해 useEffect를 쓴다.

jsx
복사편집
import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <div>타이머: {count}</div>;
}

빈 배열([])을 두 번째 인자로 넘기면 컴포넌트가 처음 렌더링될 때만 실행된다.

타이머를 시작하고, 컴포넌트가 사라질 때 정리 함수로 타이머를 없앤다.