componentDidMount가 가져온 가능성 중에서, 팀이 가장 주목한 것은 바로 ‘서버 데이터 연동’ 문제였다. 현대적인 웹 애플리케이션은 대부분 페이지가 로드된 후에 비동기적으로 서버에서 데이터를 가져와 화면을 채우는 방식을 사용했다. 이 비동기 데이터 요청을 언제, 어디서 시작해야 하는지는 늘 개발자들의 오랜 고민거리였다.
“이제 우리에게는 이 문제에 대한 명확한 해답이 생겼습니다.”
회의에서 조던 워크가 선언했다. 그는 <UserProfile> 컴포넌트를 예시로 들며, 최적의 데이터 요청 시나리오를 설명했다.
“사용자가 특정 유저의 프로필 페이지에 들어왔다고 가정해 봅시다. 우리는 사용자에게 빈 화면을 보여주며 기다리게 할 순 없습니다. 일단 이름이나 기본 레이아웃 같은, 최소한의 정보라도 최대한 빨리 보여줘야 하죠.”
그는 <UserProfile> 컴포넌트의 초기 렌더링 과정을 설명했다.
1단계: 초기 렌더링
- 부모 컴포넌트가
<UserProfile>을 렌더링하며props로userId를 전달한다. <UserProfile>의getInitialState가 호출되어, 데이터 로딩 상태를 나타내는state를 설정한다.
return { isLoading: true, userData: null };<UserProfile>의render메서드가 호출된다.isLoading이true이므로, 화면에는 ‘로딩 중...’이라는 메시지나 스피너(spinner) 같은 UI를 먼저 그린다.
// UserProfile.js - render 메서드
render: function() {
if (this.state.isLoading) {
return React.createElement('div', null, '프로필 정보를 불러오는 중...');
}
// ... (데이터 로딩 완료 후의 UI)
}
“여기까지가 사용자가 처음 보게 될 화면입니다. 아직 서버와는 어떤 통신도 하지 않았지만, 사용자에게 시스템이 무언가 하고 있다는 피드백을 즉시 줄 수 있죠.”
“그리고 바로 이 순간,” 조던의 목소리에 힘이 실렸다. “render가 끝나고 ‘로딩 중...’ 메시지가 실제 DOM에 성공적으로 그려진 직후, 리액트는 약속대로 componentDidMount를 호출합니다.”
- 데이터 요청 시작
componentDidMount메서드 안에서, 비로소 서버에 데이터를 요청하는 코드가 실행된다.
// UserProfile.js - componentDidMount 메서드
componentDidMount: function() {
// props로 받은 userId를 이용해 API를 호출한다.
api.fetchUserProfile(this.props.userId)
.then(function(response) {
// ... (데이터를 성공적으로 받아왔을 때의 처리)
});
}
이 방식은 사용자 경험(UX) 측면에서 매우 중요했다. UI 렌더링을 데이터 요청보다 먼저 수행함으로써, 애플리케이션의 초기 반응 속도를 극적으로 향상시킬 수 있었다.
- 상태 업데이트 및 리렌더링
- 잠시 후, 서버로부터 사용자 프로필 데이터가 성공적으로 도착한다.
- API 호출의
then콜백 함수 안에서,setState를 호출하여 컴포넌트의 상태를 갱신한다.
// .then 콜백 함수 내부
this.setState({
isLoading: false,
userData: response.data
});
setState가 호출되었으므로, 리액트의 재조정 과정이 다시 시작된다.<UserProfile>의render가 재호출된다.- 이제
this.state.isLoading은false이고,this.state.userData에는 서버에서 받은 데이터가 담겨있다. render는 ‘로딩 중...’ 메시지 대신, 실제 사용자 프로필 정보를 담은 버추얼 DOM을 반환한다.- 리액트는 변경된 부분만 실제 DOM에 효율적으로 업데이트한다.
componentDidMount.
이곳은 부작용을 일으키기 위한 단순한 공간이 아니었다. 그것은 UI 렌더링과 데이터 로딩을 분리하여, 사용자에게 쾌적한 경험을 제공하고 애플리케이션의 성능을 최적화할 수 있는 가장 이상적인 장소였다.
데이터를 가져오기 위해 어디에 코드를 넣어야 할지 더 이상 고민할 필요가 없었다. 리액트는 componentDidMount라는 명확한 이정표를 제시함으로써, 모든 비동기 데이터 요청 로직을 한곳에 모아 예측 가능하고 일관된 방식으로 관리할 수 있는 길을 열어주었다.
