React 입력값이 새로고침 후 사라질 때, state와 저장소를 나누는 순서

AI가 만든 메모장, 할 일 입력창, 설정 화면이 처음에는 잘 작동하는 것처럼 보이다가 새로고침 한 번에 빈칸이 되는 순간이 있습니다. 초보자는 이때 "저장 버튼을 눌렀는데 왜 사라지지?"라고 느끼지만, 실제 원인은 버튼 디자인이 아니라 값이 어디에 저장되는지 정해지지 않은 상태일 때가 많습니다. 전체 화면을 다시 만들어 달라고 하기 전에 state, 저장 함수, 저장 위치, 불러오기 코드를 순서대로 보면 수정 범위가 훨씬 작아집니다.

Tap to zoom

React의 state 설명은 state가 각 렌더에 전달되는 값이라고 안내합니다. state 보존과 초기화 문서는 React가 UI 트리의 컴포넌트 위치에 state를 연결한다고 설명합니다. 화면 안에서 잠시 들고 있는 값과 새로고침 뒤에도 남아야 하는 값은 역할이 다릅니다. MDN의 localStorage 설명에 따르면 이 저장소는 같은 origin에서 브라우저 세션을 넘어 데이터를 보존합니다. 그래서 첫 판단은 간단합니다. 지금 값이 useState에만 있으면 화면 안에서는 보일 수 있지만, 새로고침 뒤까지 남는 저장은 아닙니다.

input 값이 state에만 있는지 먼저 봅니다

가장 흔한 형태는 아래처럼 입력값이 useState에만 연결된 코드입니다.

const [text, setText] = useState("");

return (
  <input
    value={text}
    onChange={(event) => setText(event.target.value)}
  />
);

이 코드는 틀린 코드가 아닙니다. 사용자가 타이핑하는 동안 화면을 바꾸기 위한 기본 구조입니다. 문제는 이 값이 컴포넌트 메모리에만 있다는 점입니다. 새로고침을 하면 화면과 컴포넌트가 다시 시작되고, 초기값 ""에서 다시 출발합니다.

초보자가 먼저 확인할 문장은 이것입니다.

이 입력값은 useState에만 있나요, 아니면 localStorage, sessionStorage, 쿠키, 서버 DB 중 하나에도 저장되나요?

AI에게도 같은 기준으로 물어보면 됩니다.

아래 React 입력값이 새로고침 후 사라집니다.
전체 구조를 바꾸지 말고, 값이 useState에만 있는지 먼저 확인해 주세요.
저장소에 쓰는 코드가 없다면 어느 줄에 어떤 저장 로직이 필요한지 최소 변경으로 알려 주세요.

저장 버튼은 클릭 연결과 저장 위치를 같이 봅니다

버튼에 "저장"이라고 쓰여 있어도 실제 저장이 되는 것은 아닙니다. 버튼이 onClick에 연결되어 있는지, 그 함수가 값을 어디에 쓰는지 봐야 합니다.

function handleSave() {
  localStorage.setItem("memo", text);
}

return <button onClick={handleSave}>저장</button>;

이 예시는 브라우저 한 대에서 간단한 메모를 남기는 수준에는 쓸 수 있습니다. 하지만 로그인한 사용자마다 값이 달라야 하거나, 다른 기기에서도 보여야 하거나, 민감한 정보가 들어간다면 브라우저 저장소가 아니라 서버나 DB 저장을 검토해야 합니다. 저장 버튼의 핵심은 버튼 모양이 아니라 저장 위치입니다.

여기서 AI에게 줄 질문은 짧을수록 좋습니다.

저장 버튼을 눌러도 새로고침 후 값이 사라집니다.
다음 3가지만 확인해 주세요.
1. button onClick이 저장 함수에 연결되어 있는지
2. 저장 함수가 실제로 값을 어디에 쓰는지
3. 새로고침 후 그 값을 다시 불러오는 코드가 있는지

localStorage와 sessionStorage의 보존 범위를 구분합니다

MDN 문서 기준으로 localStorage는 브라우저 세션을 넘어 남는 저장소이고, sessionStorage는 탭 또는 세션 단위로 나뉘는 저장소입니다. 둘 다 서버 DB가 아닙니다. 다른 사람 계정과 공유되는 저장도 아니고, 기기 간 동기화도 아닙니다.

간단한 연습용 메모라면 localStorage가 이해하기 쉽습니다.

function handleSave() {
  localStorage.setItem("memo", text);
}

단기 입력 흐름이나 결제 전 임시 단계처럼 탭을 닫으면 사라져도 되는 값은 sessionStorage가 더 맞을 수 있습니다. 반대로 회원 프로필, 주문, 게시글, 결제 상태처럼 사용자 계정과 묶여야 하는 값은 서버 저장이 필요합니다.

초보자 기준으로는 이렇게 나누면 됩니다.

Next.js에서는 브라우저 저장소를 읽는 위치도 확인합니다

nextjs.org의 Server and Client Components 문서처럼 Next.js App Router에서는 서버에서 렌더링되는 부분과 브라우저에서 상호작용하는 Client Component가 나뉩니다. localStorage는 브라우저의 window에 붙은 API이므로 서버에서 바로 읽을 수 없습니다. 입력값 저장 코드를 넣었는데 localStorage is not defined 같은 오류가 난다면 저장 방식보다 실행 위치를 먼저 봐야 합니다.

클라이언트 입력 컴포넌트라면 파일 위쪽에 아래 선언이 필요할 수 있습니다.

"use client";

그 다음 저장된 값을 처음 화면에 다시 넣는 로직이 필요합니다.

useEffect(() => {
  const saved = localStorage.getItem("memo");
  if (saved) setText(saved);
}, []);

여기서 중요한 기준은 저장 코드와 불러오기 코드가 한 쌍인지입니다. 저장만 있고 불러오기가 없으면 새로고침 후 화면은 여전히 빈칸으로 시작할 수 있습니다. 반대로 불러오기만 있고 저장이 없으면 예전 값만 계속 보이거나 아무것도 보이지 않습니다.

Tap to zoom

같은 순서로 새로고침 테스트를 고정합니다

AI가 코드를 고쳐 줬다면 바로 "완료"라고 믿지 말고 같은 절차로 확인합니다.

1. 입력창에 짧은 문장을 씁니다.
2. 저장 버튼을 누릅니다.
3. 브라우저를 새로고침합니다.
4. 값이 다시 보이는지 확인합니다.
5. 개발자 도구 Application 탭이나 콘솔로 저장 위치를 확인합니다.

이 테스트를 통과하지 못하면 아직 저장 기능이 끝난 것이 아닙니다. 이때는 감정적으로 "왜 안 되냐"고 묻기보다 증거를 붙여서 다시 요청해야 합니다.

입력값 저장 기능을 고쳤지만 새로고침 후 값이 다시 보이지 않습니다.

현재 동작:
- 입력은 됩니다.
- 저장 버튼 클릭은 됩니다.
- 새로고침 후 입력창이 빈칸입니다.

확인해 주세요:
1. value와 onChange 연결
2. 저장 함수 실행 여부
3. 저장 위치(localStorage/sessionStorage/server)
4. 새로고침 후 불러오기 로직
5. Next.js Client Component 위치

전체 리팩터링 없이 실패 원인 한 가지와 최소 수정 코드만 제안해 주세요.

이 요청은 AI에게 새 화면을 만들게 하는 문장이 아닙니다. 값이 사라지는 경로를 추적하게 만드는 문장입니다. 코딩사관학교 초보자에게 필요한 것은 더 긴 설명보다 사라지는 지점을 찾는 순서입니다.

저장 함수 자체가 눌리지 않는다면 먼저 기본 버튼과 커스텀 Button의 onClick 전달을 비교하는 순서로 클릭 경로를 분리하세요. 화면이 아예 하얗게 멈췄다면 저장 문제로 단정하지 말고 React 하얀 화면에서 Console 첫 오류를 찾는 방법부터 적용해야 합니다.

오늘 남길 5줄 진단표

입력값이 사라질 때는 아래 5줄만 먼저 채웁니다.

입력 컴포넌트 파일:
값을 들고 있는 state 이름:
저장 버튼 함수 이름:
저장 위치:
새로고침 후 불러오는 코드 위치:

이 다섯 줄이 비어 있으면 AI도 추측으로 고치기 쉽습니다. 반대로 다섯 줄이 채워지면 문제는 대부분 "state에만 있음", "저장 함수 미연결", "저장 위치 선택 오류", "불러오기 누락", "Next.js 실행 위치 오류" 중 하나로 줄어듭니다. 오늘 화면에서 입력값이 사라진다면 새 기능을 더 붙이기 전에 이 5줄부터 채운 뒤 AI에게 맡기세요.

참고 출처

• React State as a Snapshot: https://react.dev/learn/state-as-a-snapshot
• React Preserving and Resetting State: https://react.dev/learn/preserving-and-resetting-state
• MDN Window localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
• MDN Window sessionStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage
• Next.js Server and Client Components: https://nextjs.org/docs/app/getting-started/server-and-client-components

이 글은 AI 코딩과 개발 학습의 일반 정보 제공 목적입니다. 도구, 모델, 커리큘럼, 요금은 버전과 시점에 따라 달라질 수 있으므로 실습이나 도입 전 공식 문서와 최신 릴리스 노트를 확인하세요.