파트 8

8.0 파트 8 (클릭 가능)

`this.setState`

우리는 이제 마운팅이 어떻게 작동하는지 알고 있으니, 다른 파트도 알아보도록 합시다. 바로, setState메소드 입니다!

setState메소드를 호출할 수 있는 이유는 무엇일까요? 그건 분명, ReactComponent로 부터 컴포넌트를 상속받았기 때문입니다. 그렇다면 이제 리엑트 소스코드에서 이 클래스를 찾아 setState메소드를 확인하는 것은 쉽습니다.

// src\isomorphic\modern\class\ReactComponent.js #68
this.updater.enqueueSetState(this, partialState)

보시다시피, 여기 updater 인터페이스가 있습니다. updater란 뭔가요? 우리가 방금 분석 한 마운팅 프로세스를 확인해보면, mountComponent 하는 동안, 인스턴스는 ReactUpdateQueue(src\renderers\shared\stack\reconciler\ReactUpdateQueue.js)를 참조하는 updater property를 받습니다.

enqueueSetState(1) 메소드 안으로 들어가서 봅시다. 우선 부분상태(partial state: this.setState에 전달하는 객체)를 내부 인스턴스 _pendingStateQueue(2)로 푸시합니다.(되집어 봅시다: public 인스턴스는 실제로 커스텀 컴포넌트인 ExampleApplication이고, 내부 인스턴스는 마운트 중에 생성 된 ReactCompositeComponent입니다.). 다음엔, enqueueUpdate 입니다. 실제로 진행중인 업데이트가 있다면 컴포넌트를 dirtyComponents리스트에 넣고, 그렇지 않다면 - update transaction 초기화 하고, dirtyComponents리스트에 컴포넌트를 넣습니다.

요약하자면, 각 컴포넌트는 자신의 보류 상태(pending states)의 목록을 가지고 있습니다. 즉, 하나의 트랜잭션에서 setState를 호출 할 때마다 그 객체를 대기열에 넣은 다음 나중에 하나씩 컴포넌트 상태(state)로 머지합니다. 그리고 setState를 호출하면, 컴포넌트를 dirtyComponents리스트에 추가 됩니다. 아마 dirtyComponents가 어떻게 처리되는지 궁금할것입니다. 맞습니다. 그것이 이 프로세스 중요한 부분입니다.