yunkogong

지난번에는 React가 여러 state 업데이트를 하나로 묶어 처리하는 batching에 대해 정리했다. setState를 여러 번 호출하더라도 React는 업데이트를 모아서 재렌더링할 수 있고, React 18부터는 automatic batching으로 그 범위가 확장됐다는 얘기였다.그런데 React를 공부하다 보면 useState만큼 자주 등장하는 훅이 하나 있다. 바로 useEffect다.처음에는 useEffect를 컴포넌트가 마운트될 때 실행하는 함수 정도로 이해했다. 의존성 배열에 []를 넣으면 한 번 실행되고, 값을 넣으면 그 값이 바뀔 때 다시 실행된다는 것도 알고 있었다.그런데 정작 왜 useEffect가 필요한지 설명하려니 막혔다.렌더링과 관련된 훅이라는 건 알겠는데, 굳이 렌더링이 끝난..

지난번에는 React의 state가 스냅샷처럼 동작한다는 개념을 정리했다.setCount(count + 1)을 세 번 호출해도 현재 렌더의 count는 바뀌지 않는다. 반면 함수형 업데이트를 사용하면 이전 업데이트 결과를 이어받아 값을 누적할 수 있다는 것도 알게 됐다.그런데 공부하면서 새로운 질문이 생겼다.setState를 여러 번 호출하면 React는 그때마다 컴포넌트를 다시 렌더링할까?지난 글에서는 React가 state 업데이트를 큐에 넣어 처리한다고 했다. 그렇다면 여러 업데이트를 모아서 한 번에 처리할 수도 있지 않을까.여기서 batching이라는 개념이 나왔다.첫 번째 오해: setState를 호출한 횟수만큼 재렌더될 줄 알았다먼저 간단한 코드로 생각해봤다.function App() { c..

지난번에는 React가 key를 기준으로 컴포넌트의 state를 어떻게 유지하는지 정리했다. key가 단순히 경고를 없애기 위한 값이 아니라, 이전 렌더와 다음 렌더 사이에서 컴포넌트를 연결하는 기준이라는 걸 알게 됐다.이번에는 state 자체가 궁금해졌다.React에서 setCount를 호출하면 값은 언제 바뀔까. 처음에는 일반 변수처럼 바로 바뀐다고 생각했다. 그런데 간단한 코드를 실행해보니 예상과 다른 결과가 나왔다.const [count, setCount] = useState(0);const handleClick = () => { setCount(count + 1); setCount(count + 1); setCount(count + 1);};count가 0일 때 버튼을 클릭하면 3이 될 줄..

한 줄 요약AI 코딩 도구인 Claude Code와 함께 한 달 동안 브라우저 게임 DRIFTORE를 만들었습니다. 첫 포털(CrazyGames)에서는 반려됐고, 품질을 고쳐 itch.io에 먼저 출시했습니다. 들어간 돈은 0원입니다. 👉 플레이하기: https://yun7420.itch.io/driftore왜 시작했나목표는 단순했습니다. 실제로 돈을 버는 게임을 하나 만들어 보자. 다만 조건을 하나 걸었습니다. 제 돈은 쓰지 않는다는 것입니다. 유료 에셋, 광고비, 도메인 비용 없이 무료로 할 수 있는 것만으로 끝까지 가 보기로 했습니다.코드는 Claude Code가 작성했고, 저는 방향을 정하고, 직접 플레이해 보고, 마음에 안 드는 부분을 말로 짚는 역할을 했습니다.어떤 게임인가화면 가운데 채굴 ..