yunkogong

지난번에는 재렌더와 실제 DOM 변경을 나눠서 정리했다. 컴포넌트가 다시 실행됐다고 화면까지 전부 바뀌는 건 아니고, 실제로 무엇을 바꿀지는 비교 과정에서 결정된다는 얘기였다.그러다 질문이 하나 생겼다. 리스트 순서가 바뀌면 React는 이전 항목과 지금 항목을 어떻게 연결할까. 사과가 첫 번째에서 두 번째로 밀렸을 때, 여전히 같은 사과라는 건 뭘 보고 아는 걸까.여기서 key가 나왔다. 리스트를 만들 때 늘 붙이던 값이다. 고유한 id를 쓰라는 것도 알고 있었다. 그런데 "왜 index는 안 돼?"라고 물으면 "성능에 안 좋으니까" 정도밖에 안 나올 것 같았다. 이번에는 그 안쪽을 정리해봤다.첫 번째 오해: key는 경고를 없애는 값인 줄 알았다리스트를 map으로 렌더링하면 key를 붙이라는 경고가 ..

2026년 9월 17일. 지난번 Virtual DOM을 정리하면서 "필터 하나 건드렸을 때 옆에 있는 테이블까지 다시 렌더되는 건 어떻게 막을까"라는 질문을 남겨뒀었다. 오늘 그걸 파봤다.이번엔 순서가 반대였다. 지난번엔 설명을 못 해서 팠는데, 이번엔 이미 코드로는 쓰고 있었다. Jotai를 써서 상태를 store에 빼놓고 있었으니까. 그런데 "왜 store에 빼?"라고 물으면 "그래야 깔끔하니까" 정도밖에 안 나올 것 같았다. 성능 얘기가 여기 붙는다는 건 어렴풋이 알았는데, 어디서 어떻게 붙는지를 몰랐다. 오늘 이해한 걸 까먹기 전에 남겨둔다.반짝이는 불이 사실 두 종류였다시작부터 걸린 게 있다. 지난 글에서 DevTools의 Highlight updates를 켜고 "일부만 반짝인다"는 걸 눈으로 ..

2026년 9월 8일. 지난번 SPA를 정리하면서 "페이지를 새로 안 받는데 그럼 화면은 대체 어떻게 바뀌는 걸까"라는 질문을 남겨뒀었다. 오늘 그걸 파봤다.시작은 또 비슷했다. "React는 Virtual DOM을 써서 빠르다"는 말을 나도 수없이 했는데, 막상 "왜 빠른데?"라고 물으면 또 말문이 막힐 것 같았다. 지난번에 한 번 당하고 나니 이번엔 미리 파보고 싶었다. 그래서 오늘 이해한 걸 까먹기 전에 일기처럼 남겨둔다. 한 줄로는 알고 있었다이 정도는 나온다. Virtual DOM은 실제 DOM을 흉내 낸 가벼운 JavaScript 객체고, 바뀐 부분만 골라서 실제 DOM에 반영한다. 여기까진 외운 문장이다.문제는 그다음이다. "그래서 그게 왜 빠른데?"한참 생각하다 알았다. 이 질문에 답하려면..

2026년 7월 22일. React로 매일 앱을 짜면서 "SPA 만든다"는 말을 아무렇지 않게 써왔는데, 오늘 누가 "SPA가 정확히 뭔데? MPA랑 뭐가 달라?"라고 물었을 때 말문이 막혔다. 매일 만들면서 정작 그게 뭔지 설명을 못 한다는 게 좀 부끄러웠다. 그래서 브라우저가 화면을 그리는 과정을 직접 열어보며 정리한 걸, 까먹기 전에 일기처럼 남겨둔다. 거창한 개념 강의가 아니라 그냥 "오늘 이걸 처음 제대로 이해했다"는 기록이다. 한 줄로는 알고 있었다물어봤을 때 이 정도는 나왔다. MPA는 페이지마다 새로 받고, SPA는 한 페이지 안에서 바뀐다. 근데 딱 거기까지였다. "그래서 뭐가 어떻게 다른데?"로 한 발만 더 들어가니 막혔다.MPA (Multi Page Application) — 화면마다..