useRef 활용

React에서 Component가 unmount 될 때의 state를 딱 한번만 log를 찍고 싶은데, 그러려면 어떻게 구현하면 될까요?

const Conter = () =>{
  const [count, setCount] = useState(0);
   useEffect(() => {
     return () => {
       console.log("unmount 시 출력", count);
     };
   }, []);
  return (
      <>
      	<h1>{count}</h1>
      	<button onClick={()=>setCount(c=>c+1)}>+<button/>
      </>
}

useEffect 함수 내부에 return 키워드를 사용하여 clean-up하고자 하는 코드를 작성하여 메모리 누수를 방지할수 있지만 해당 코드는 처음 렌더링 될때의 state를 출력하게 된다
해당 코드에서 button 눌러서 카운트state 를 증가 시키더라도 해당 컴포넌트가 언마운트 도리때의 state의 값인 5가 아닌 초기 state 값의 0이 출력

해당 질문에 답하긴 위해선 useRef
사용해야한다.

1. useRef는 .current 프로퍼티로 전달된 인자로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다.
   2.useRef는 .current 프로퍼티에 변경 가능한 값을 담고 있는 "상자"와 같습니다.
   3.그리고 .current 프로퍼티를 변경하더라도 이 것이 리렌더링을 발생시키진 않습니다.

ref는 변경가능한 값을 담고 있는 상자로서 객체, 이때 ref 객체안의 값은 리액트의 생명주기에 독릭적(리렌더와 상관없는) 값

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

const Conter = () =>{
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  
   useEffect(() => {
  	countRef.current = count; 
   },[count]) // (1) 첫 번째 useEffect
   
   useEffect(() => {
     return () => {
       console.log("unmount 시 출력", countRef.current);
     };
   }, []); // (2) 두 번째 useEffect
  
  return (
      <>
      	<h1>{count}</h1>
      	<button onClick={()=>setCount(c=>c+1)}>+<button/>
      </>
}