이벤트는 어떻게 흐르는가? - 캡처링, 타겟, 버블링 3단계를 살펴보며

들어가기에 앞서레벨 2 장바구니 미션에서 쿠폰 모달을 구현하면서 겪은 트러블 하나를 정리하려고 한다. 쿠폰 목록을 모달로 보여주고, 체크박스를 클릭해 쿠폰을 선택하면 할인 금액이 하단 버튼에 실시간으로 반영되도록 구현했다. 그런데 쿠폰 체크박스를 클릭했을 뿐인데, 쿠폰 적용 버튼은 누르지도 않았는데도 모달이 저절로 닫혀버리는 문제가 발생했다. 자식 요소를 클릭했을 뿐인데 왜 부모의 클릭 핸들러인 닫기 동작까지 실행된 걸까? 이걸 이해하려면 먼저 onClick이 실제로 어떤 과정을 거쳐 호출되는지 알아야 했다. 1. 버튼 클릭 시 onClick은 어떻게 호출될까 1) MouseEvent와 캡처링 → 타겟 → 버블링버튼을 클릭하면 브라우저는 MouseEvent 객체를 만들어낸다. 여기에는 클릭과 관련된 정보..

• format_list_bulleted 리액트
• · 2026. 7. 12.
• textsms

setState를 호출하면, 리액트는 무슨 일을 할까? - dispatchSetState 파헤치기

서론우테코에서는 원정대라는 활동을 한다. 원정대는 각 레벨마다 자신이 파고들고 싶었던 주제를 하나 선택해서, 크루들과 함께 그 주제를 딥다이브 하는 활동이다. 이번 레벨 2에서는 리액트를 접하게 되면서 아무 생각 없이 썼던 setState에 호기심이 생겼고, "set 함수를 호출하는 순간 어떤 일이 일어나길래 화면에 바로 업데이트되는 거지?" 에 대한 궁금증으로 setState에 대해 원정대원들과 함께 파보았다. 이번 원정대에는 리액트의 실제 소스 코드를 보면서 원리를 파보았는데, 처음에는 생각보다 나에게 많이 어려웠다.. 그치만 레벨 2가 끝난 지금 다시 한번 복기해보니 예전보다 이해가 훨씬 잘 되었고, 설명하기 쉬워졌다. 조금씩 나도 모르게 성장했나보다... 그래서 이번 글에서 setState의 실제..

• format_list_bulleted 리액트
• · 2026. 7. 9.
• textsms

낙관적 업데이트, 어디까지 적용해야 할까?

들어가면서낙관적 업데이트를 처음 접하면, 적용할 수 있는 곳마다 다 쓰고 싶어진다. 서버 응답을 기다리지 않고 UI를 먼저 업데이트하니 인터랙션이 즉각적으로 느껴지고, "이렇게 좋은 걸 왜 안 써?"라는 생각이 자연스럽게 든다. 이번 원정대에서 지오의 코드를 리뷰하다가 상품 수량 업데이트 핸들러에 낙관적 업데이트가 적용된 걸 보고 흥미가 생겼고, step4 장바구니 미션에서 직접 써보기로 했다. 그런데 구현하다 보니 단순히 낙관적 업데이트를 어디에 적용할지가 아니라, 직접 조작한 값이 아닌 그 결과로 파생되는 값을 어떻게 처리할지가 더 큰 고민이었다. 낙관적 업데이트란낙관적 업데이트는 API 응답을 기다리지 않고 UI를 먼저 변경한 뒤, 요청이 실패하면 이전 상태로 되돌리는 패턴이다. 이름 그대로 요청이..

• format_list_bulleted 리액트
• · 2026. 6. 24.
• textsms

React는 왜 리스트 렌더링에서 key를 요구할까?

장바구니 미션에서 상품 목록을 렌더링할 때 map을 이렇게 사용했었다. {cartItems.map((item) => ( onToggleItem(item.product.id)} onUpdateQuantity={onUpdateQuantity} onDeleteItem={onDeleteItem} /> ))}그러자 콘솔에 경고가 떴다. 목록에 있는 각각의 자식 요소는 고유한 key를 가져야 한다는 경고였다. 처음엔 의문이 들었다. 이미 각각의 컴포넌트가 화면에 따로 렌더링되고 있으니, 그 자체로 고유한 게 아닌가? 왜 굳이 key를 또 붙여야 할까? 이 질문의 정답을 찾으려면, React가 리스트를 어떻게 비교하는지부터 알아야 한다. k..

• format_list_bulleted 리액트
• · 2026. 6. 15.
• textsms

[우아한테크코스] 레벨 2 - 1주차 회고

Keep이지만 Problem인 것.. 이번 주에는 사실 딱히 잘한 게 없는 것 같다.벌써부터 레벨 2의 고난이 시작된 느낌이다. 재미가 조금 없어졌고, 두려워졌다. 레벨 1에서는 처음부터 다시 웹을 배운다는 설렘으로 뭐든 열심히 재미있게 했다. 매주 주어지는 미션, 특히 실행 컨텍스트 딥다이브 등등.. 뭐든 즐겁게 했고, 할 수 있는 만큼 너무 재미있게 깊게 팠다. 기대한 만큼 행복하게 공부했던 것 같다. 그런데 지금은 결이 다르다. 재미보다 압박이 더 크게 느껴진다.레벨 2를 시작하자마자 바로 미션이 시작돼서 그런 걸 수도 있겠지만, 이번 레벨을 대하는 나의 마음가짐이 아직 제대로 잡히지 않은 것 같다. 더불어, 처음 리액트를 제대로 접하면서, 동시에 페어프로그래밍으로 함께 미션을 구현하는 것이 나에게..

• format_list_bulleted 우테코
• · 2026. 5. 2.
• textsms

내가 예측한 JS 실행 순서, 정말 맞을까? — 실행 컨텍스트로 파헤치는 비동기 흐름

들어가기에 앞서이번 JS 파헤치기 원정대를 하며 세운 개인적인 목표는,자바스크립트가 내부적으로 어떻게 동작하는지를 실행 컨텍스트 관점에서 이해하는 것이었다. 원정대원들과 코드를 하나씩 뜯어보는 과정에서, 특히 비동기 파트에서 자주 막히는 순간이 있었다.그 과정 속에서 자연스럽게, 비동기가 자바스크립트에서 얼마나 중요한 개념인지 체감하게 되었다. 그래서 이번 글에서는 비동기 코드를 실마리로 삼아,실행 컨텍스트가 콜 스택에 어떤 순서로 쌓이고 실행되는지 그 흐름을 따라가 보려고 한다. Promise를 다루기 때문에, 이전 글을 먼저 읽고 오는 것을 추천한다. 자바스크립트가 동시에 일하는 척하는 방법 — promise, async/await 편들어가면서이전 글에서는 자바스크립트에서 비동기를 사용하는 이유, ..

• format_list_bulleted 자바스크립트
• · 2026. 4. 26.
• textsms