React <usrRef>: 참조 객체 생성

useRef (use + reference(참조))

✅변경 가능한 참조 객체를 생성할 수 있는 기능(hook)

• useRef는 객체를 반환시킨다. 
• useRef객체에는 current라는 속성이 존재 > 컴포넌트의 재렌더링에도 값이 유지

사용 목적

• DOM  요소에 직접적으로 접근하고 조작
• 컴포넌트가 재랜더링될 때도 값이 유지되는 변수 관리
• 이전 상태를 기억 (렌더링 사이에 지속되는 값을 유지)

기본문법

✅ const refContainer = userRef(initailValue);

• initailValue:  참조 객체의 초기값
• refContainer.current:  저장된 현재 값에 접근

<예제>

useState와 useRef를 사용해서 카운트 예제를 만들어 본다. 

이 예제를 통해서 useRef를 사용하면 재랜더링되더라도 동일한 참조값을 유지하는 것을 확인할거다.

(= DOM 요소에 직접적으로 접근하고 조작이 가능한 것을 확인 할수 있다.)

 

export default function UseRef02() {

  return (
    <div>
      <p>현재 카운트: </p>
      <p>이전 카운트: </p>
      <button>증가</button>
    </div>
  )
}

먼저 요소들을 먼저 작성해준다. 증가 버튼을 누르면 현재카운트 되는 값은 현재카운트에 카운트에 이전 값은 이전 카운트에 들어가는 데  이전 카운트에서 useRef 값을 사용할거다.

 

export default function UseRef02() {
  const [count, setCount] = useState<number>(0);
  const prevCountRef = useRef<number>(0);
  
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <p>이전 카운트: {prevCountRef.current}</p>
      <button onClick={incrementCount}>증가</button>
    </div>
  )
}

그 다음으로 useState로 카운트 상태관리 함수를 만들어준다. 여기의 count가 현재 카운트로 들어간다.

이전 카운트 값을 저장할 prevCountRef.current를 만든다. 이때 두값다 기본값은 0으로 한다.

그런다음 증가를 위해 incrementCount 핸들러 함수를 만들거다.

 

  const incrementCount = () => {
    setCount(prevCount => {
      prevCountRef.current = prevCount;
      return prevCount + 1;
    });
  }

setCount 상태관리 함수를 사욯 하는데 

preveCount는 현재 상태 값인데 prevCountRef.current에 값을 저장하는 것은 카운트 이전 값을 저장한다는 의미가된다.

그리고 반환 되는 것은 1 증가된 현재 상태 값이다. 이렇게 해서 onClick이벤트 속성에 넣으면 버튼을 클릭할때마다.

카운트값이 1씩 증가한다.

 

<결과>