2026. 7. 19.
React 버튼을 누르기 전 Too many re-renders가 뜨는 이유, onClick 실행 시점 구분
React Too many re-renders 오류가 뜰 때 onClick에 함수를 호출했는지와 컴포넌트 본문의 setter를 확인하고, 새로고침과 클릭으로 수정 결과를 검증하는 순서다.
ARTICLE ARCHIVE
React 기사
최신 글부터 오래된 글까지 한 번에 훑고, 필요한 카테고리로 빠르게 좁혀 볼 수 있습니다.
React 목록
26개 기사를 표시합니다.
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가 위험한 이유, 삭제와 정렬 테스트까지 초보자 기준으로 정리합니다.