AI랑 같이하는 코딩

1. 체크박스는 눌리는데 왜 상태가 안 바뀔까

할 일 목록을 만들 때 가장 흔한 문제 중 하나가 "체크박스는 클릭되는데 완료 상태가 반영되지 않는" 상황입니다. 화면에서 체크가 들어간 것처럼 보여도, 실제 데이터 배열은 그대로인 경우가 많고, 반대로 데이터는 바뀌었는데 화면이 다시 렌더링되지 않아 변화가 없는 것처럼 보일 때도 있습니다.

결국 이 문제는 체크박스 자체보다 이벤트 처리, 데이터 업데이트, 화면 렌더링 세 단계 중 어디가 끊겼는지 찾는 작업입니다. 이 흐름을 순서대로 점검하면 대부분 빠르게 해결됩니다. 감으로 고치기보다 단계별로 검증하는 접근이 중요합니다.

2. 가장 자주 생기는 원인 5가지

아래 항목은 체크박스 완료 상태 미반영 이슈에서 실제로 자주 발견되는 원인입니다.

3. 단계별 점검과 수정 방법

1) 클릭 이벤트가 실제로 들어오는지 확인

핸들러 시작 줄에 console.log('checkbox changed')를 넣어 이벤트 진입을 확인하세요. 로그가 안 찍히면 선택자나 바인딩 시점 문제입니다. 동적 리스트라면 개별 요소에 직접 바인딩보다 부모에 이벤트 위임을 쓰는 편이 안정적입니다.

2) 어떤 항목을 바꾸는지 id 추적

체크된 항목의 id를 콘솔에 찍어서 실제 데이터의 id와 일치하는지 확인합니다. 이때 문자열 '3'과 숫자 3 비교 때문에 매칭이 실패하는 경우가 매우 흔합니다. 비교 전에 타입을 통일하면 의외로 쉽게 해결됩니다.

3) 상태 변경 후 즉시 렌더링

상태를 변경해도 화면 렌더 함수가 호출되지 않으면 사용자는 변화가 없다고 느낍니다. 순수 JavaScript에서는 update 함수 마지막에 render()를 호출하고, 프레임워크 환경에서는 setState 패턴을 정확히 지켜야 합니다. 핵심은 "데이터 변경"과 "화면 갱신"을 분리해서 확인하는 것입니다.

4) localStorage와 함께 동기화

체크 상태가 바뀐 직후 저장을 하지 않으면 새로고침 시 이전 상태로 돌아갑니다. toggle 처리 후 저장 함수(saveTodos)를 즉시 호출하고, 앱 시작 시 loadTodos로 복원하는 흐름을 고정하세요. 저장-복원 루틴이 안정되면 완료 상태가 일관되게 유지됩니다.

4. 상태 동기화를 안정화하는 습관

첫째, 상태 변경 로직을 한 함수로 모으고 중복 코드를 줄이세요. 둘째, 이벤트 진입 로그, 대상 id 로그, 변경 후 배열 로그 3개를 표준 디버깅 세트로 두면 문제 위치를 즉시 찾을 수 있습니다. 셋째, 렌더 함수는 항상 단일 소스(상태 배열)만 바라보게 설계하면 화면-데이터 불일치가 줄어듭니다.

AI에게 수정 요청할 때는 체크 이벤트 코드, 상태 업데이트 코드, 렌더 함수, 저장 코드 4부분을 함께 주면 정확도가 크게 높아집니다. 결국 체크박스 이슈의 핵심은 이벤트 연결, 정확한 항목 매칭, 업데이트 후 렌더 및 저장입니다.

5. 자주 묻는 질문