“props와 state가 컴포넌트를 움직이는 두 개의 엔진이라면, 우리는 그 엔진을 어떻게 제어할까요? 특히 state라는 내부 발전기는 어떻게 켜고 끄는 걸까요?”
조던 워크는 세 번째 멘탈 모델을 제시하며, 리액트에서 가장 중요하고도 가장 오해받기 쉬운 함수에 대해 설명하기 시작했다.
“setState는 UI를 새로고침하는, 단 하나뿐인 ‘마법 버튼’이다.”
그는 화이트보드에 <LikeButton> 컴포넌트를 그리고, 그 옆에 커다란 빨간색 버튼을 그렸다. 버튼 위에는 setState라고 쓰여 있었다.
“우리가 웹 페이지를 볼 때, 내용이 바뀌면 어떻게 하죠? 보통 브라우저의 ‘새로고침(F5)’ 버튼을 누릅니다. 그러면 브라우저는 서버에서 최신 정보를 다시 가져와 페이지 전체를 새로 그려주죠.”
“setState는 바로 이 ‘새로고침’ 버튼과 같습니다. 하지만 몇 가지 중요한 차이점이 있습니다.”
차이점 1: setState는 컴포넌트 자신만을 위한 새로고침 버튼이다.
“브라우저의 새로고침 버튼이 페이지 전체에 영향을 미치는 반면, setState는 오직 그 버튼을 누른 컴포넌트와 그 자식들에게만 영향을 미칩니다. LikeButton 안에서 setState를 호출하면, 리액트는 ‘아, LikeButton과 그 자식들만 새로고침하면 되겠군’ 이라고 생각합니다. 이것이 리액트가 효율적으로 동작하는 비결 중 하나입니다.”
차이점 2: setState는 ‘어떻게’ 바꿀지 알려주지 않는다.
“우리가 setState 버튼을 누를 때, 우리는 리액트에게 ‘버튼 텍스트를 이걸로 바꾸고, 클래스 이름은 저걸로 추가해’ 라고 시시콜콜하게 지시하지 않습니다. 이것은 jQuery의 방식이죠.”
“대신, 우리는 리액트에게 ‘이게 내가 원하는 다음 상태(Next State)야. 이 새로운 상태에 맞게 알아서 새로고침 해줘’ 라고 선언할 뿐입니다. setState({ isLiked: true })는 ‘좋아요가 눌린 상태로 새로고침 해줘’라는 요청과 같습니다.”
차이점 3: setState는 똑똑한 새로고침 버튼이다.
“가장 중요한 차이점입니다. 브라우저의 새로고침은 화면 전체를 깜빡이며 무식하게 다시 그립니다. 하지만 setState 버튼을 누르면, 리액트의 버추얼 DOM이라는 똑똑한 비서가 먼저 나섭니다.”
그는 이 ‘똑똑한 새로고침’의 과정을 설명했다.
- 요청 접수:
setState버튼이 눌린다. - 가상 리허설: 리액트는 실제 화면을 건드리기 전에, 머릿속(메모리)에서 먼저 ‘새로고침된 모습(새 버추얼 DOM)’을 그려본다.
- 변경점 분석: 그리고 그 모습을 ‘이전 모습(옛 버추얼 DOM)’과 비교하여, 정확히 어떤 부분이 바뀌었는지(텍스트, 색상 등)를 분석한다.
- 최소한의 작업: 마지막으로, 분석된 그 최소한의 변경점만을 실제 화면에 딱 한 번 적용한다.
“결과적으로, 개발자의 눈에는 ‘새로고침’ 버튼을 누른 것처럼 모든 것이 자동으로 바뀌지만, 사용자의 눈에는 화면 깜빡임 하나 없이 필요한 부분만 부드럽게 바뀌는, 마법과도 같은 경험이 이루어지는 것입니다.”
이 멘탈 모델은 setState의 본질을 완벽하게 꿰뚫었다.
setState는 단순히 객체를 변경하는 함수가 아니었다.
그것은 개발자가 리액트의 강력한 렌더링 엔진을 작동시키는 유일한 인터페이스였다.
“기억하십시오.” 조던이 결론을 내렸다. “리액트의 세계에서 화면을 바꾸고 싶다면, 절대 화면을 직접 만져서는 안 됩니다. 오직 setState라는 마법의 새로고침 버튼을 누르기만 하면 됩니다. 나머지는 리액트가 전부 알아서 해줄 겁니다.”
이제 개발자들은 더 이상 setState의 비동기적 동작이나 내부의 복잡한 메커니즘을 두려워할 필요가 없었다. 그저 ‘UI를 업데이트하고 싶을 때 누르는 버튼’이라는 단순하고 강력한 멘탈 모델 하나만 기억하면 되었다. 이로써 리액트의 가장 큰 진입 장벽 중 하나가 허물어지고 있었다.
