“state는 컴포넌트의 내부 기억이다.”
조던 워크의 이 한마디는 팀원들의 머릿속에 흩어져 있던 개념들을 하나로 꿰었다. props가 외부에서 주입되는 불변의 설정이라면, state는 컴포넌트가 살아 숨 쉬며 겪는 변화의 기록이었다.
팀은 즉시 이 state라는 개념을 리액트 API에 공식적으로 통합하는 작업에 착수했다. 가장 먼저, state가 어떻게 탄생하는지를 정의해야 했다.
<LikeButton> 예제에서 이미 프로토타입을 만들었듯이, 팀은 getInitialState라는 이름의 메서드를 React.createClass 명세의 일부로 포함하기로 결정했다.
getInitialState()
- 이 메서드는 컴포넌트가 메모리에 생성되는 시점, 즉 ‘마운트(mount)’되기 직전에 단 한 번만 리액트에 의해 호출된다.
- 이 메서드는 반드시
state의 초기값을 담은 객체를 반환해야 한다. 여기서 반환된 객체가 해당 컴포넌트 인스턴스의this.state초기값으로 설정된다.
조던은 <CommentBox> 컴포넌트를 예시로 state의 사용법을 보여주었다.
var CommentBox = React.createClass({
// 컴포넌트의 초기 내부 상태를 정의한다.
getInitialState: function() {
// 처음에는 입력창이 비어있고, 글자 수도 0이다.
return {
commentText: '',
charCount: 0
};
},
// ... (다른 메서드들) ...
render: function() {
// 이제 컴포넌트는 this.state 값을 읽어서 렌더링한다.
return React.createElement('div', null, [
React.createElement('textarea', {
value: this.state.commentText,
onChange: this.handleTextChange // 텍스트 변경을 처리할 핸들러
}),
React.createElement('p', null, '글자 수: ' + this.state.charCount)
]);
}
});
코드는 명확했다. <CommentBox>는 이제 commentText와 charCount라는 두 가지 정보를 스스로 기억할 수 있게 되었다. 그리고 render 메서드는 props뿐만 아니라 this.state에 담긴 이 ‘기억’을 바탕으로 화면을 그렸다.
state의 도입으로 인해, 컴포넌트는 두 종류로 나뉘기 시작했다.
-
Stateless Components (상태 없는 컴포넌트): 오직
props만 받아서 화면을 그리는 단순하고 예측 가능한 컴포넌트.<Avatar>나 정적인<Icon>등이 여기에 해당했다. 이들은 주로 순수한 표현(presentation)의 역할만 담당했다. -
Stateful Components (상태 있는 컴포넌트):
props뿐만 아니라, 스스로 변화하는 내부state를 가지는 복잡한 컴포넌트. 사용자의 입력을 받는<CommentBox>나, 데이터를 가져와 목록을 표시하는<Newsfeed>등이 여기에 해당했다. 이들은 종종 여러 개의 상태 없는 컴포넌트들을 조립하여 하나의 완성된 기능을 제공하는 ‘컨테이너(Container)’의 역할을 했다.
이 구분은 개발자들에게 중요한 가이드라인을 제공했다. “가능한 한 상태 없는 컴포넌트로 만들어라. 그리고 상태가 꼭 필요한 경우에만, 그 상태를 책임질 소수의 상태 있는 컴포넌트를 만들어라.”
이 원칙은 애플리케이션의 복잡성을 한 곳으로 모아 관리하기 쉽게 만들어주었다. 상태가 여기저기 흩어져 있는 대신, 그것을 책임지는 ‘관리자’ 컴포넌트가 명확해졌기 때문이다.
state의 등장은 리액트 컴포넌트에 생명력을 불어넣었다. 이제 컴포넌트는 단순히 외부 자극(props)에 반응하는 것을 넘어, 스스로 생각하고(state), 자신의 기억에 따라 행동을 바꿀 수 있는 독립적인 존재가 되었다.
하지만 아직 해결되지 않은 가장 큰 질문이 남아있었다.
handleTextChange 이벤트 핸들러 안에서, 저 this.state.commentText의 값을 어떻게 바꿀 것인가? 그리고 그 변화를 어떻게 리액트에게 알려, 화면을 다시 그리도록 명령할 것인가?
모든 팀원들은 직감했다. 이 질문에 대한 답이 바로 리액트를 리액트답게 만드는, 가장 핵심적인 비밀이라는 것을.
