2026. 7. 19.
React 버튼을 누르기 전 Too many re-renders가 뜨는 이유, onClick 실행 시점 구분
React Too many re-renders 오류가 뜰 때 onClick에 함수를 호출했는지와 컴포넌트 본문의 setter를 확인하고, 새로고침과 클릭으로 수정 결과를 검증하는 순서다.
TOPIC
React
폼, 버튼, 상태
2026. 7. 18.
React onClick 한 번인데 왜 요청은 두 개일까? handler count로 경로 찾기
React 버튼 한 번에 로그나 요청이 두 번 보일 때 handler 횟수와 Network를 먼저 측정하고, 버블링·form submit·native listener·Effect를 분리하는 순서다.
2026. 7. 18.
Invalid hook call이 뜨면 코드를 고칠까, 패키지를 고칠까?
React Invalid hook call 경고를 Hook 호출 규칙, React와 React DOM 버전, 중복 React 경로로 나눠 확인하고 최소 수정 뒤 재검증하는 순서다.
2026. 7. 18.
Rendered fewer hooks than expected, return 아래 Hook을 옮기세요
React 컴포넌트가 조기 반환 때문에 렌더마다 다른 수의 Hook을 호출할 때, return 아래 Hook을 옮기고 lint와 상태 전환으로 확인하는 순서다.
2026. 7. 17.
React uncontrolled input 경고 없이 입력하려면, 첫 value 타입부터 고정하세요
React 입력값이 undefined에서 문자열로 바뀔 때 뜨는 경고를 재현하고, text와 checkbox 초기값을 일관되게 고치는 순서다.
2026. 7. 17.
React Cannot update a component 경고, 첫 사용자 코드 줄부터 추적하세요
React의 Cannot update a component while rendering a different component 경고에서 원인 setter를 찾고, 이벤트와 Effect 중 맞는 실행 시점으로 옮겨 확인하는 순서다.
2026. 7. 16.
Objects are not valid as a React child 해결: 객체는 필드로, 배열은 map으로
React 자식 자리에 일반 객체가 들어가 생기는 오류를 객체 키로 추적하고, 필드 출력과 배열 map 중 맞는 수정으로 바꾸는 점검 순서다.
2026. 7. 16.
React Maximum update depth exceeded, 반복 렌더링을 끊는 확인 순서
React Maximum update depth exceeded 오류에서 렌더 중 상태 변경과 useEffect 의존성 순환을 구분해 반복 렌더링을 멈추는 점검 순서다.
2026. 7. 16.
React useEffect 두 번 실행, setup → cleanup → setup 로그로 구분하세요
React 개발 서버에서 useEffect 로그나 API 요청이 두 번 나타날 때 Strict Mode를 끄기 전에 setup, cleanup, 의존성, 외부 시스템 연결 여부를 순서대로 확인하는 방법입니다.
2026. 7. 16.
React 버튼을 누르면 페이지가 새로고침될 때, type과 submit부터 확인하세요
React 폼 안의 버튼을 눌렀더니 페이지가 다시 로드되고 입력값이 사라진다면, button type과 form submit을 나눠 확인하고 URL·Network·입력 상태로 수정 결과를 검증하는 순서다.
2026. 7. 9.
React 입력칸에 글자가 안 써질 때, value와 onChange부터 분리하세요
AI가 만든 React 폼에서 입력칸에 글자가 안 써질 때는 컴포넌트를 다시 만들기보다 value, onChange, defaultValue, readOnly 중 어느 선택이 맞는지 먼저 나누면 됩니다.
2026. 7. 9.
React key warning이 보이면 전체 재작성 말고 map 안의 id부터 보세요
React 목록에서 key warning이 보이면 화면 전체를 다시 만들기보다 map 안의 반복 JSX와 안정적인 id부터 확인해야 합니다. index key를 써도 되는 조건, Math.random key가 위험한 이유, 삭제와 정렬 테스트까지 초보자 기준으로 정리합니다.
2026. 7. 8.
React state 직접 수정이 화면 업데이트를 막는 이유
AI가 만든 React 화면에서 변수나 콘솔 값은 바뀐 것 같은데 UI가 그대로라면 CSS나 새로고침보다 state 직접 수정을 먼저 의심해야 합니다. 객체와 배열을 새 값으로 바꾸는 최소 수정 순서를 정리합니다.
2026. 7. 8.
React 화면이 느려졌다면 memo보다 먼저 렌더 원인부터 좁히세요
AI가 만든 React 목록이나 검색 화면이 느려졌다면 memo를 먼저 붙이기보다 느린 동작 하나를 기록하고, React Profiler와 Chrome Performance로 렌더 원인을 좁힌 뒤 AI에게 최소 수정만 요청하는 편이 안전합니다.
2026. 7. 8.
AI가 만든 React select가 안 바뀔 때, value부터 보는 순서
AI가 만든 React 폼에서 select를 눌러도 값이 안 바뀌면 전체 폼을 다시 만들기보다 value, onChange, option 값, 초기화 코드를 순서대로 좁혀야 한다.
2026. 7. 5.
Supabase 저장 버튼이 먹통일 때, RLS를 7분 안에 확인하는 순서
AI가 만든 React나 Next.js 화면에서 Supabase 저장 버튼은 눌리는데 테이블이 비어 있다면 UI를 다시 만들기 전에 error, 로그인 상태, RLS 정책, 반환값을 7분 안에 나눠 봅니다.
2026. 7. 2.
React 체크박스가 안 눌릴 때, 3분 안에 checked부터 고치는 순서
AI가 만든 React 설정 화면에서 체크박스를 눌러도 체크 표시가 바뀌지 않을 때, 컴포넌트 전체를 다시 만들기 전에 checked, onChange, e.target.checked, preventDefault, label 연결을 3분 안에 확인하는 순서입니다.
2026. 7. 1.
AI가 만든 React 목록이 map 오류로 멈출 때, 3분 복구 5칸
AI가 만든 React 목록 화면에서 Cannot read properties of undefined reading map 오류가 뜰 때, 전체 컴포넌트를 다시 만들기 전에 오류 줄, 데이터 모양, 배열 기본값, 로딩 상태, AI 수정 프롬프트를 3분 안에 확인합니다.
2026. 7. 1.
React key 경고, AI 코딩 초보가 3분 만에 리스트 값 섞임을 막는 5칸
AI가 만든 React 리스트에서 key prop 경고가 뜨거나 삭제 후 입력값이 다른 줄로 이동한다면 전체 재작성보다 map 위치, 고유 id, index 위험, 정렬 테스트를 먼저 확인해야 합니다.
2026. 6. 30.
React useEffect는 왜 계속 실행될까? 상태 업데이트와 의존성을 함께 본다
React useEffect가 계속 실행될 때 상태 업데이트와 의존성 배열을 대조하고, 객체·함수·Strict Mode를 구분해 반복 원인을 좁히는 순서입니다.
2026. 6. 30.
React 개발 서버는 켜졌는데 화면은 하얗다: Console로 원인 찾기
React 개발 서버는 켜졌는데 화면이 하얗게 비는 초보자를 위한 점검표. 브라우저 콘솔, root 마운트, return null, 데이터 접근, import 순서로 원인을 좁히고 AI에게 붙여 넣을 증거를 정리한다.
2026. 6. 30.
React 폼 제출 후 새로고침될 때, 기본 동작을 막는 기준
AI가 만든 React나 Next.js 폼에서 제출 버튼을 누를 때 화면이 새로고침된다면 onSubmit 위치, button type, preventDefault, async 처리, 콘솔과 네트워크를 순서대로 확인해야 합니다.
2026. 6. 30.
React Module not found: Can't resolve 뒤 이름부터 구분하세요
AI가 만든 React 앱에서 Module not found 또는 Can't resolve가 뜨면 전체 코드를 다시 만들기 전에 패키지 이름과 파일 경로를 구분하고, 설치·대소문자·실행 환경 순서로 원인을 좁혀야 합니다.
2026. 6. 28.
Console에 button clicked가 안 뜰 때, React 클릭 신호 추적법
React 버튼을 눌러도 화면이 바뀌지 않을 때, onClick 첫 줄의 Console 로그가 찍히는지로 클릭 차단과 핸들러 이후 문제를 나누는 점검 순서입니다.
2026. 6. 26.
React 입력값이 새로고침 후 사라질 때, state와 저장소를 나누는 순서
React나 Next.js 입력값이 새로고침 후 사라진다면 state, 저장 함수, 저장 위치, 불러오기 코드를 순서대로 확인해 누락된 한 단계만 고칠 수 있습니다.
2026. 6. 19.
기본 버튼은 되는데 커스텀 Button만 안 될 때, prop 전달 두 곳
네이티브 button은 되는데 디자인용 커스텀 Button만 반응하지 않을 때, 호출부 prop 이름과 내부 button의 onClick 매핑을 비교해 끊긴 한 줄만 고치는 순서입니다.