useRef

basic

Dose Not Trigger Re-Render

React 컴포넌트에서 상태(state)를 변경할 때 주의해야하는 점이다. 상태를 변경하는 것이 항상 컴포넌트를 리렌더링하지 않는다.

예를 들어, 상태를 업데이트하는 코드가 실행되더라도 React는 가상 DOM을 통해 실제 DOM을 업데이트할지 여부를 결정하며, 실제 DOM 업데이트는 필요한 경우에만 수행된다. 따라서 상태 업데이트가 반드시 리렌더링을 유발하지는 않는다

Preservers The Value between Renders

React 컴포넌트의 상태(state)가 렌더링 값에 값(state)을 보존하는 특성을 가지고있다.
React컴포넌트는 렌더링 사이에 상태를 유지하므로 이전 렌더링에서 설정한 상태 값은 다음 렌더링에서 유지된다. 이는 React의 가상 DOM 및 상태 관리 기능을 통해 구현된다.

Target DOM Nodes/Elements

이벤트가 발생한 요소 또는 조작해야 하는 요소를 가리키는 것으로, 이벤트 핸들러에서 주로 사용된다. 이것은 일반적으로 e.currentTarget 또는 e.target 과 같은 이벤트 객체 속성을 통해서 접근된다.

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

const UseRefBasics = () => {
  const [value, setValue] = useState(0);
  const refContainer = useRef(null);
  const isMounted = useRef(false);

  useEffect(() => {
    refContainer.current.focus();
  })

  useEffect(() => {
    if(!isMounted.current){
      isMounted.current = true;
      return;
    }
    console.log('re-render')
  }, [value]);

  const handleSubmit = (e) => {
    e.preventDefault();
    const name = refContainer.current.value;
    console.log(name)
  };

  return (
    <div>
      <form className='form' onSubmit={handleSubmit}>
        <div className='form-row'>
          <label htmlFor='name' className='form-label'>
            Name
          </label>
          <input type='text' id='name' className='form-input' ref={refContainer}/>
        </div>
        <button type='submit' className='btn btn-block'>
          submit
        </button>
      </form>
      <h1>value : {value}</h1>
      <button onClick={() => setValue(value + 1)} className='btn'>
        increase
      </button>
    </div>
  );
};

export default UseRefBasics;

useRef 는 React 컴포넌트 내에서 DOM 요소에 접근하거나 컴포넌트의 상태를 추적하는데 사용된다

  useEffect(() => {
    refContainer.current.focus();
  })

refContiner.current는 useRef를 사용하여 참조한 DOM 요소를 나타낸다. 컴포넌트가 렌더링될 때 입력 필드에 자동 포커스가 맞춰진다.

useEffect(() => {
  if (!isMounted.current) {
    isMounted.current = true;
    return;
  }
  console.log('re-render');
}, [value]);

useEffect는 컴포넌트가 처음 마운트될 때는 실행되지 않고,
value 상태 값이 변경될 때만 실행된다. isMounted라는 useRef 변수를 사용하여 컴포넌트가 처음 마운트된 경우를 추적하고, 그 후에는 "re-rendere" 메세지를 콘솔에 출력하게 된다.
즉, isMounted.current를 확인하여 처음 마운트 여부를 판별하고, 처음 마운트 후에 상태 변경에 따라 실행되는 로직이다.