사용자가 버튼을 클릭할 때마다 count를 1씩 올리려고 setCount(count + 1)을 호출했습니다. 그런데 바로 다음 줄에서 console.log(count)를 찍으면 항상 이전 값이 출력됩니다.

Q1. setState를 호출했는데도 왜 즉시 값이 바뀌지 않는 걸까요?


for (var i = 0; i < 3; i++) 루프에서 비동기 콜백(예: setTimeout)을 등록했더니, 콜백에서 찍히는 i가 모두 3으로 나옵니다.

Q2. 반복문을 돌릴 때 의도한 값이 아니라 마지막 값만 보이는 기술적 이유는 무엇인가요?


addEventListener('scroll', handler)로 스크롤 이벤트에서 DOM 스타일을 계속 바꿨더니, 페이지가 심하게 버벅이고 CPU 사용량이 크게 증가했습니다.

Q3. 스크롤 핸들러에서 DOM을 건드리는 것이 왜 성능에 치명적인가요?


fetch로 API 호출을 했는데, 개발자 도구 Network에서 요청이 한 번이 아니라 OPTIONS + 실제 요청(POST)처럼 두 번 나가는 경우가 있습니다.

Q4. 요청을 한 번만 보냈다고 생각했는데 왜 “preflight(사전 요청)”이 발생할까요?



React에서 배열을 렌더링할 때 key로 index를 사용했습니다. 이후 중간에 항목을 삽입/삭제했더니, 특정 행의 입력값이 다른 행으로 “옮겨간” 것처럼 보입니다.

Q5. index를 key로 쓰면 왜 UI 상태가 뒤틀릴 수 있을까요?


useEffect(() => { apiCall(); }, [])로 마운트 시 한 번만 호출되길 기대했는데, 개발 환경에서 API가 두 번 호출됩니다.

Q6. 의존성 배열이 비어 있는데도 왜 이펙트가 두 번 실행될 수 있을까요?


부모 컴포넌트가 리렌더링될 때마다 자식에게 onClick={() => doSomething()} 형태로 함수를 내려주고 있습니다. React.memo로 자식을 감쌌는데도 자식이 계속 리렌더링됩니다.

Q7. 메모이제이션을 했는데도 왜 리렌더링이 계속 발생할까요?


useEffect의 의존성 배열에 특정 값을 넣지 않았더니, 화면에는 최신 값이 보이는데 이펙트 내부에서는 과거 값으로 동작하는 버그가 발생했습니다(예: 타이머/이벤트 핸들러에서 stale 값 사용).

Q8. “최신 상태”를 쓰고 있다고 생각했는데 이펙트/콜백에서 “오래된 값(stale closure)”을 보게 되는 이유는 무엇인가요?


sticky를 적용했는데 스크롤을 내려도 전혀 고정되지 않습니다. CSS는 맞는 것 같은데 특정 레이아웃에서만 동작하지 않습니다.

Q9. sticky가 동작하지 않는 대표적인 기술적 원인은 무엇인가요?


배포 후 수정한 JS/CSS가 사용자에게 반영되지 않고, 새로고침을 여러 번 해야 바뀌거나 어떤 사용자는 계속 옛날 화면을 봅니다(특히 CDN/Service Worker 사용 시).

Q10. “코드는 배포됐는데 클라이언트는 옛날 파일을 쓰는” 현상이 발생하는 캐시/번들 관점의 기술적 이유와 해결 방향은 무엇인가요?





지피티야 고마워~!