개요

textInput에 useState의 변수 값을 연결한 후 해당 값을 fireabase의 db에 저장하였다. 근데, 저장할 데이터가 없다고 출력되는 것이다.

원인?

React의 setState는 비동기적으로 작동한다.
setState는 상태를 즉시 바꾸는 게 아니라 다음 렌더에 바꿀 거라고 예약만 해놓는 방식이다.
따라서, 다음 렌더링 시 변화한 값이 반영되는 것이다.

필자가 구현하려던 로직은

사용자가 메모를 작성
→ 다른 화면으로 이동 시 자동 저장

의 구조였는데,
앞서 언급했듯이 setState는 비동기적으로 작동하기 때문에,
state의 최신 상태가 적용되기 전에 저장 함수가 호출된다.
즉, 최신 값이 적용될 수 없는 구조였다.

해결방법?

💡 useRef 활용하기

useRef란?

useRef는 React에서 렌더링과 무관하게 값을 기억할 수 있는 저장소

const myRef = useRef(초기값);
myRef.current = 최신값;

▶ .current를 통해 값을 저장하고 읽을 수 있다.

useRef를 사용하는 이유

• 값이 바뀌어도 컴포넌트는 리렌더링되지 않음
• 반대로, 값은 항상 최신 상태를 유지

useState와의 조합?

화면에 보여줄 땐 useState,
보여주지 않고 기억만 할 땐 useRef을 사용한다.

간단한 예시와 함께 이해해보자.

const [input, setInput] = useState("");
const latestInput = useRef("");

// 사용자가 입력할 때마다 최신값도 갱신
const handleChange = (text: string) => {
  setInput(text);               // UI 업데이트
  latestInput.current = text;  // 저장용 최신값
};

// 저장할 때는 Ref 사용
const save = () => {
  console.log("저장할 내용:", latestInput.current);
};

필자의 경우, textInput에 변수값을 연결해야 했기에 useState를 사용하고,
화면 이탈 시 최신 변수값를 자동적으로 db에 반영하기 위해 useRef를 사용하였다.