AI가 만든 React select가 안 바뀔 때, value부터 보는 순서

AI가 만든 React 폼에서 드롭다운을 눌렀는데 선택값이 다시 원래대로 돌아가면, 초보자는 보통 CSS나 브라우저 문제부터 의심합니다. 하지만 select가 보이는데 값만 바뀌지 않는다면 먼저 볼 곳은 스타일이 아니라 value와 onChange가 같은 state를 보고 있는지입니다.

결론부터 잡겠습니다. react.dev의 React 공식 문서는 controlled select box에는 backing value를 동기적으로 업데이트하는 onChange 핸들러가 필요하다고 설명합니다. developer.mozilla.org의 HTMLSelectElement.value 문서도 select의 value가 선택된 option의 값을 나타낸다고 설명합니다. 그래서 오늘 할 일은 폼 전체를 다시 만들게 하는 것이 아니라 선택값이 state로 들어가고 다시 화면으로 돌아오는 한 바퀴를 확인하는 것입니다.

Tap to zoom

먼저 value가 고정값인지 봅니다

가장 흔한 문제는 value에 사용자가 바꿀 수 없는 고정 문자열이 들어간 경우입니다.

<select value="basic">
  <option value="basic">기본</option>
  <option value="pro">프로</option>
</select>

이 코드는 사용자가 pro를 눌러도 다음 렌더에서 다시 basic을 보여 줄 수 있습니다. React가 화면을 다시 그릴 때 value="basic"이라고 명령하고 있기 때문입니다. 이 상태에서 AI에게 "드롭다운이 안 돼"라고만 말하면 AI가 스타일, 라이브러리, 폼 구조를 한꺼번에 바꿀 수 있습니다.

먼저 아래처럼 state와 연결되어 있는지 봅니다.

const [plan, setPlan] = useState("basic");

return (
  <select value={plan} onChange={(event) => setPlan(event.target.value)}>
    <option value="basic">기본</option>
    <option value="pro">프로</option>
  </select>
);

여기서 핵심은 value={plan}과 setPlan(event.target.value)가 같은 state를 기준으로 움직인다는 점입니다. React <select> 문서의 controlled select 설명도 이 경계를 강조합니다. 값을 보여 주는 줄과 값을 바꾸는 줄이 같은 state를 봐야 합니다.

이미 체크박스가 안 눌릴 때 checked부터 보는 순서를 겪었다면 구조는 비슷합니다. 체크박스는 checked, select는 value가 화면을 고정하는 쪽입니다.

onChange가 실제 값을 넣는지 확인합니다

onChange가 붙어 있다고 끝난 것은 아닙니다. 핸들러가 실행되어도 state를 바꾸지 않으면 화면은 그대로입니다.

function handlePlanChange(event: React.ChangeEvent<HTMLSelectElement>) {
  console.log(event.target.value);
}

<select value={plan} onChange={handlePlanChange}>
  <option value="basic">기본</option>
  <option value="pro">프로</option>
</select>

이 코드는 콘솔에는 값이 찍힐 수 있지만 plan은 그대로입니다. 확인용 로그만 있고 state update가 빠졌기 때문입니다. 고쳐야 할 줄은 전체 폼이 아니라 아래 한 줄입니다.

function handlePlanChange(event: React.ChangeEvent<HTMLSelectElement>) {
  setPlan(event.target.value);
}

초보자는 이때 event.target.innerText, selectedIndex, document.querySelector 같은 우회 코드를 AI에게 받기도 합니다. 먼저 event.target.value로 충분한지 확인합니다. MDN 문서 기준으로도 select의 value는 선택된 option의 값을 나타내는 속성입니다.

Tap to zoom

option value와 state 값이 같은 글자인지 봅니다

onChange도 있고 setState도 있는데 값이 비어 보이면 option 값과 state 값이 맞지 않을 수 있습니다.

const [plan, setPlan] = useState("free");

return (
  <select value={plan} onChange={(event) => setPlan(event.target.value)}>
    <option value="basic">기본</option>
    <option value="pro">프로</option>
  </select>
);

여기서 state의 초기값은 free인데 option에는 free가 없습니다. 브라우저와 React가 보여 주는 결과는 상황에 따라 헷갈릴 수 있습니다. 초보자에게 필요한 기준은 간단합니다. state에 들어갈 수 있는 값은 option value 목록 안에 있어야 합니다.

점검표는 이렇게 씁니다.

화면에 보이는 글자와 저장값은 달라도 됩니다. 예를 들어 label은 무료 플랜, value는 free일 수 있습니다. 다만 state와 option value는 서로 맞아야 합니다.

다시 원래 값으로 돌아가면 reset 코드를 찾습니다

선택 직후에는 바뀌었다가 바로 원래 값으로 돌아간다면 onChange보다 다른 초기화 코드가 문제일 수 있습니다. AI가 만든 폼에는 props, API 응답, useEffect, submit 후 reset이 섞여 있을 때가 많습니다.

아래 코드는 userPlan이 바뀔 때마다 state를 다시 덮습니다.

useEffect(() => {
  setPlan(userPlan);
}, [userPlan]);

이 코드 자체가 항상 틀렸다는 뜻은 아닙니다. 서버에서 받은 값을 처음 폼에 채우는 목적일 수 있습니다. 하지만 사용자가 선택한 뒤에도 계속 같은 값으로 되돌린다면 이 줄이 select를 고정하는 원인일 수 있습니다. 이때는 AI에게 "useEffect를 지워줘"라고 바로 말하지 말고, 언제 초기화해야 하는지 조건을 묻는 편이 안전합니다.

예를 들어 새 사용자 데이터를 처음 불러올 때만 채우는지, 저장 후 폼을 비워야 하는지, 편집 중에는 사용자가 고른 값을 유지해야 하는지 나눠야 합니다. AI가 파일을 너무 많이 고칠 때 범위를 막는 프롬프트처럼, 수정 범위를 select와 초기화 코드로 좁혀야 합니다.

AI에게는 select 한 개만 붙여 묻습니다

문제를 좁힌 뒤에는 폼 전체를 붙이지 않습니다. 문제가 되는 select, 현재 state, option 목록, 기대 동작만 줍니다.

Tap to zoom

React select 값이 클릭해도 바뀌지 않거나 다시 원래 값으로 돌아갑니다.

문제 코드:
[select와 관련 state, onChange, option 목록만 붙여 넣기]

현재 값:
[예: plan은 "basic"으로 찍힙니다]

기대 동작:
[예: 사용자가 "프로"를 고르면 plan이 "pro"가 되고 화면도 유지되어야 합니다]

확인해 주세요:
1. value와 onChange가 같은 state를 쓰는지
2. onChange가 event.target.value를 state에 넣는지
3. state 값이 option value 목록 안에 있는지
4. useEffect나 reset 코드가 선택값을 다시 덮는지
5. 수정이 필요하면 파일 전체가 아니라 최소 변경 줄만 제안해 주세요

이 프롬프트의 목적은 AI를 더 많이 일하게 만드는 것이 아닙니다. AI가 건드릴 범위를 select 상태 경로로 줄이는 것입니다. React 폼 오류는 한 번에 폼 전체를 다시 만들수록 원인이 흐려집니다. 먼저 한 바퀴를 확인해야 합니다.

오늘은 네 줄만 채우고 다시 묻습니다

React select가 안 바뀔 때 첫 행동은 라이브러리 교체가 아닙니다. 아래 네 줄을 채우는 것입니다.

value가 읽는 state:
onChange가 바꾸는 state:
option value 목록:
선택 뒤 다시 덮는 코드:

이 네 줄이 비어 있으면 AI도 추측으로 고치기 쉽습니다. 반대로 네 줄이 채워지면 문제는 대부분 고정 value, 빠진 state update, option value 불일치, reset 코드 중 하나로 줄어듭니다. 오늘 드롭다운이 움직이지 않는다면 폼 전체를 다시 만들기 전에 value가 어디에서 와서 어디로 돌아가는지부터 확인하세요.

참고 출처

• React Docs, <select>: https://react.dev/reference/react-dom/components/select
• React Docs, <input>: https://react.dev/reference/react-dom/components/input
• MDN, <select> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/select
• MDN, HTMLSelectElement.value: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/value

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