상태 변화가 UI 변화로 이어지는 과정

리액트의 핵심 메커니즘이 하나씩 밝혀지자, 팀은 지금까지 논의된 모든 조각들을 하나로 꿰어 전체적인 그림을 완성하기로 했다. 톰은 화이트보드 앞에 서서, 마치 한 편의 영화 시나리오를 쓰듯, ‘상태 변화가 UI 변화로 이어지는’ 전체 과정을 처음부터 끝까지 정리하기 시작했다.

장면 1: 평온한 상태 (The Calm)

• 화면에는 리액트로 만들어진 <LikeButton> 컴포넌트가 렌더링되어 있다.
• 버튼의 텍스트는 ‘좋아요 (10)’이다.
• 컴포넌트 내부의 this.state는 { isLiked: false, currentCount: 10 } 이다.
• 리액트는 이 상태에 해당하는 버추얼 DOM 트리를 메모리에 ‘이전 상태’로 보관하고 있다.

장면 2: 사용자 행동 (The Action)

• 사용자가 마우스로 ‘좋아요 (10)’ 버튼을 클릭한다.
• 브라우저는 click 이벤트를 감지하고, 리액트는 이 이벤트를 <LikeButton>의 handleClick 메서드에 연결한다.

장면 3: 상태 변경 요청 (The Request)

• handleClick 메서드가 실행된다.
• 메서드 내부의 this.setState({ isLiked: true, currentCount: 11 }) 코드가 호출된다.
• 중요: 이 순간, this.state는 아직 바뀌지 않는다. 리액트는 이 요청을 접수하고, ‘리렌더링이 필요함’이라는 플래그를 세운다.

장면 4: 리액트의 반응 (The Reaction)

• 리액트는 이제 자신의 차례임을 인지한다.
• 가장 먼저, 접수된 요청({ isLiked: true, ... })을 현재 state와 병합하여 this.state를 { isLiked: true, currentCount: 11 }로 업데이트한다.
• 다음으로, <LikeButton> 컴포넌트의 render() 메서드를 자동으로 재호출한다.

장면 5: 새로운 설계도 생성 (The Blueprint)

• render() 메서드는 업데이트된 this.state를 기반으로, 새로운 버추얼 DOM 객체를 생성하여 반환한다.
• 이 새로운 버추얼 DOM은 { tagName: 'button', properties: { className: 'liked' }, children: ['좋아요 취소 (11)'] } 와 같은 모습을 하고 있다.

장면 6: 비교와 분석 (The Diffing)

• 리액트의 Diffing 알고리즘이 가동된다.
• 엔진은 메모리에 있던 ‘이전 버추얼 DOM’과 방금 생성된 ‘새로운 버추얼 DOM’을 비교한다.
• 두 객체를 비교한 결과, className과 children(텍스트)이 변경되었음을 감지한다.
• 이 변경점들을 모아 구체적인 작업 목록을 생성한다.

장면 7: 최종 반영 (The Reconciliation)

• 리액트 렌더러는 이 작업 목록을 들고, 비로소 실제 DOM에 접근한다.
• 실제 <button> 요소의 className 속성을 'liked'로 바꾸고, textContent를 '좋아요 취소 (11)'로 변경한다.
• 이 모든 DOM 조작은 가능한 한 한 번에 묶어서(batched) 처리하여 성능을 최적화한다.

장면 8: 다시 평온한 상태로 (Back to Calm)

• UI 업데이트가 완료되었다.
• 리액트는 방금 생성한 ‘새로운 버추얼 DOM’을 이제 ‘이전 상태’로 저장하고, 다음 변경을 기다린다.
• 화면에는 ‘좋아요 취소 (11)’이라고 쓰인 버튼이 보인다.

화이트보드에 그려진 이 8단계의 흐름을 보며, 팀원들은 모두 고개를 끄덕였다. 더 이상 마법은 없었다. setState부터 실제 DOM 업데이트까지, 모든 과정이 명확한 논리의 사슬로 연결되어 있었다.

복잡해 보이지만, 이 모든 과정은 개발자로부터 완벽하게 감춰져 있었다. 개발자는 오직 3단계, setState를 호출하는 것까지만 책임지면 되었다. 4단계부터 8단계까지의 모든 복잡하고 어려운 일은 리액트가 전부 알아서 처리해주었다.

“이것이 리액트입니다.” 조던이 조용히 말했다. “개발자의 의도를 가장 단순하게 표현하게 하고, 그 결과를 가장 효율적으로 구현하는 시스템.”

리액트의 심장부가 어떻게 뛰는지, 그 완벽한 순환 과정이 마침내 팀 전체에 공유된 순간이었다. 이제 그들은 이 강력한 심장을 가지고 더 큰 도전에 나설 준비가 되었다.