컴포넌트 에서 setState 를 사용 할 때 무슨 일 이 일어나 는지 고민 해 본 적 이 있 습니까 ? 
 간단 해 보이 지만 의문 이 있 다 . React 가 하 는 것 일까 ReactDOM 이 하 는 것 일까 
 보통 DOM 을 변경 하 는 것 은 ReactDOM 이 처리 하 는 것 으로 생각 된다 . 
 그러나 this . setState ( ) 를 실행 할 때 , ReactDOM 에서 가져오 지 않 는다 . 
 또한 , class 에 기반 한 React . Component 는 React 자체 에 구현 되 어 있 다 . 
 어떻 게 React . Component 내부 의 setState ( ) 는 DOM 을 변경 시킬 수 있 을까 
 경고 ! : 사실 내 블로그 의 글 들 은 React 를 생산 적 으로 사용 하 는 데 필 수 는 아니 다 . 이 글 은 React 내부 에 대한 내용 으로 완전히 옵션 이 다 ! 
 React . Component 클래스 는 DOM 변경 처리 로직 을 포함 해야 된다고 생각 해 왔 을 것 이 다 . 
 그러나 this . setState ( ) 는 다른 환경 에서 어떻게 동작 하 고 있 습니까 . 
 예 를 들 어 , React Native app 또한 React . Component 를 상속 받 는다 . 
 위 에 예시 처럼 this . setState ( ) 를 사용 하 고 있 지만 , Android 와 iOS 의 렌더링 되 는 뷰 는 DOM 이 아니 다 . 
 Test Renderer 와 Shallow Renderer 를 알 고 있 을 것 이 다 . 
 위 두 가지 의 테스트 방법 은 컴포넌트 를 렌 더 하 고 , 컴포넌트 내부 에서 this . setState ( ) 를 실행 하 는 것 이 다 . 
 그러나 DOM 과 함께 동작 되 지 는 않 는다 . 
 React ART 같 은 렌 더러 를 사용 할 때 , 페이지 에서 하나 이상 의 렌 더러 를 사용 할 수 있 다는 것 을 알 수 있 다 . 
 ( 예 를 들 어 , ART Components 는 React DOM tree 내부 에서 동작 한다 . ) 
 이렇게 하 면 전역 플래그 나 변수 유지 를 할 수 없 게 된다 . 
 그래서 React . Component 는 어떻게 든 state 변화 에 대한 핸들링 을 플랫 폼 관련 코드 에 위임 한다 . 
 어떻게 동작 하 는지 이해 하 기 전 에 , 패키지 들 이 어떻게 분리 되 는지 , 왜 분리 되 는지 조금 더 자세 하 게 알아보 자 . 
 흔히 들 하 는 오해 중 하나 가 React " 엔진 " 은 react 패키지 내부 에 있 다는 것 이 다 . 사실 이 아니 다 . 
 사실 이 패키지 는 React 0 . 14 버전 이후 로 분리 되 었 다 . ( package split in React 0 . 14 ) 
 react 패키지 는 의도 적 으로 컴포넌트 가 정의 된 API 들 을 노출 시켰 다 . React 구현 의 대부분 은 " renderers " 안 에 정의 되 어 있 다 
 react - dom , react - dom / server , react - native , react - test - renderer , react - art 같 은 것 들 이 renderers 의 분류 된다 ( 본인 의 것 을 스스로 빌 드 할 수 도 있 다 ) . 
 이게 바로 react 패키지 가 플랫폼 에 종속 되 지 않 고 사용 되 는 이유 이 다 . 
 React . Component , React . createElement , React . Children 과 같 은 모든 유틸리티 들 이 전부 , 그리고 Hooks 까지 특정 플랫폼 에 종속 되 지 않 는다 . 
 ReactDOM , ReactDOM server , React Native 와 같 은 다양 한 환경 에서 , 컴포넌트 는 import 이후 에 동일 한 방법 으로 실행 한다 . 
 반면 에 , 렌 더러 패키지 는 플랫 폼 종속 적 API , ReactDOM . render ( ) 같 은 DOM node 내부 의 React 체계 를 노출 시켰 다 . 
 각 렌 더러 들 은 API 를 제공 한다 . 
 이상 적 으론 대부분 컴포넌트 들 이 렌 더러 로부터 import 를 하 는 것 이 필요 하 지 않 다 . 
 이러 한 것 들 이 좀 더 렌 더러 들 의 자유도 를 높여 준다 . 
 많 은 사람 들 이 상상 하 는 리 액트 엔진 은 실제로 각각 의 렌 더러 내부 에 있 습니다 . 
 -> ( 브라우저 에서 동작 하 는 렌 더러 [ react - dom ] , 스마트폰 에서 동작 하 는 렌 더러 [ react - native ] 에 각각 리 액트 엔진 이 있 습니다 ) 
 많 은 렌 더러 들 은 같 은 코드 의 복사본 을 하나 씩 가지 고 있 습니다 . 우리 는 이 ' 같 은 코드 ' 를 reconciler 라고 부르 죠 . 
 webpack 같 은 번 들러 들 은 보다 나 은 퍼포먼스 를 위해 reconciler 코드 ' 와 ' 렌 더러 코드 ' 를 뭉쳐서 최적 화 된 번들 을 만듭니다 . 
 하지만 같 은 코드 의 복사본 을 다수 의 렌 더러 들 이 가지 고 있 는 건 ' 번들 사이즈 ' 를 고려 한다면 좋 지 않 습니다 . 
 react - dom 과 react - native 를 함께 번들 링 하 면 결과물 에 같 은 코드 가 2 개 가 되 니까요 . 
 보통 절대 다수 의 리 액트 유저 들 은 한 번 에 하나 의 렌 더러 만 필요 하 니까 큰 문제 는 아닐 겁니다 . 
 이제 왜 react 와 react - dom 패키지 는 새로운 기능 을 업데이트 하 기 위해 필요 한 것 을 알 수 있 다 . 
 예 를 들 어 , Context API , React . createContext ( ) 는 React 16 . 3 에서 추가 될 때 , React 패키지 에 노출 되 었 다 . 
 그러나 사실 React . createContext ( ) 는 context 의 기능 을 구현 하 지 않 는다 . 
 구현 은 ReactDOM 과 ReactDOM Server 는 각각 다를 필요 가 있 다 . 
 예 를 들 어 , createContext ( ) 는 몇몇 일반 객체 를 반환 한다 . 
 Consumer : null , 
 < MyContext . Provider > 나 < MyContext . Consumer > 를 코드 에서 사용 할 때 , 렌 더러 는 이것 들 을 어떻게 핸들 링 할지 결정 한다 . 
 ReactDOM 은 한 가지 방법 으로 context value 들 을 추적 해야 했 다 . 
 그러나 ReactDOM Server 는 다르 게 동작 한다 . 
 그래서 16 . 3 버전 이상 에서 react 를 업데이트 할 때 , react - dom 은 업데이트 되 지 않 았 다 . 
 당신 은 아직 Provider 와 Consumer 타입 같 은 특별 한 렌 더러 를 사용 할 때 아직 모를 거 다 . 
 이것 이 더 버전 이 오래 된 react - dom 이 사용 가능 한 이유 이 다 . 
 React Native 에서 도 동일 하 다 . 
 그러나 ReactDOM 과 다르 게 React 릴리즈 는 즉시 React Native 릴리즈 를 강제 실행 하 지 않 는다 . 
 그쪽 은 독립 적 인 일정 을 가지 고 있 다 . 
 업데이트 된 렌 더러 코드 는 몇 주 에 한 번 씩 React Native repository 에 각각 동기 화 된다 . 
 이것 이 React Native 가 ReactDOM 과 일정 이 다름 에 도 기능 을 사용 가능 하 게 하 는 이유 이 다 . 
 좋 다 , 그래서 우리 는 react 패키지 는 많 은 것 을 포함 하 지 않 는 것 을 알 았 다 . 
 구현 체 는 react - dom , react - native 같 은 렌 더러 들 에 포함 되 어 있 다 . 
 그러나 어떻게 setState ( ) 가 React . Component 에서 올바른 렌 더러 에게 작동 하 는지 답변 이 충분 하 지 않 다 . 
 정답 은 모든 렌 더러 는 생성 된 클래스 에서 특별 한 필드 를 설정 한다 
 특별 한 필드 는 updater 라고 불린다 . 
 당신 의 클래스 인 스턴스 가 생성 된 이후 에 , ReactDOM , ReactDOM Server , React Native 같 은 것 들 은 거의 올바르 게 설정 한다 . 
 React . Component 에 setState 구현 체 를 살펴보 면 , 모든 것 이 컴포넌트 인 스턴스 를 생성 한 렌 더러 에 동작 하 도록 위임 되 었 다 . 
 // Use the ' updater ' field to talk back to the renderer ! 
 ReactDOM Server 는 state 변화 를 무시 하 고 경고 하 는 반면 , ReactDOM 과 React Native 는 reconciler 의 복사본 을 처리 하 게 한다 . 
 이게 this . setState ( ) 가 React 패키지 에 정의 되 어 있 지만 , DOM 을 업데이트 하 는 방법 입니다 . 
 React DOM 에 의해 설정 된 this . updater 를 읽 고 ReactDOM schedule 을 허용 하 고 업데이트 를 처리 합니다 . 
 class 에 대해선 알 았 으니 Hooks 는 어떻게 생각 하 나 
 Hooks API 를 처음 봤 을 때 , 궁금 한 점 이 있 다 . 
 useState 가 무엇 을 어떻게 하 는지 추정 으론 React . Component 클래스 의 this . setState ( ) 보다 " 마법 " 같 다는 것 이 다 . 
 그러나 오늘 위 의 글 에서 보 듯 , 기본 this . setState ( ) 구현 체도 훌륭 하 다 . 
 렌 더러 로 호출 을 전달 하 는 것 을 제외 하 고 는 아무 것 도 하 지 않 는다 . 
 useState Hook 은 똑같 은 일 을 합니다 . 
 Hooks 는 updater 필드 대신 , " dispatcher " 객체 를 사용 한다 . 
 React . useState ( ) , React . useEffect ( ) 나 Hooks 에서 만들 어 진 것 들 을 사용 할 때 , dispatcher 로 전달 된다 . 
 그리고 각각 의 렌 더러 들 은 컴포넌트 가 렌더링 되 기 전 에 dispatcher 를 설정 한다 . 
 // Restore it back 
 예 를 들 면 , ReactDOM Server 구현 체 나 , ReactDOM 과 React Native 가 공유 하 는 reconciler 구현 체가 해당 된다 . 
 이게 바로 ReactDom 과 같 은 렌 더러 가 Hooks 같 은 동일 한 React 패키지 에 접근 해야 하 는 이유 이 다 . 
 그렇 지 않 으면 컴포넌트 가 dispatcher 를 참조 하 지 않 는다 . 
 동일 한 컴포넌트 구조 에 React 의 복사본 이 여러 개 있 을 때 기능 이 작동 하 지 않 을 수 있 다 . 
 그러나 이러 한 점 은 항상 불 분명 한 버그 로 이어져 있 으므로 Hooks 는 공수 가 들 기 전 에 패키지 복제 본 을 해결 하 도록 한다 . 
 권장 하 지 는 않 지만 진보 된 기술 사용 사례 의 경우 dispatcher 를 기술 적 으로 무시 할 수 있 다 . 
 ( __ currentDispatcher 이름 에 대해 거짓말 을 했 지만 React repo 에서 찾 을 수 있 다 . ) 
 예 를 들 어 React DevTools 는 특별 한 목적 으로 만들 어 진 dispatcher 를 사용 하 여 JavaScript 스택 추적 을 캡 처하 여 Hooks 구조 를 스스로 수정 한다 . 
 집 ( ? ) 에서 이것 을 반복 하 지 말 자 . 
 이것 은 또한 Hooks 가 본질 적 으로 React 에 종속 적 이 지 않 다는 것 을 의미 한다 . 
 나중 에 더 많 은 라이브러리 가 동일 한 원시 적 인 Hooks 를 다시 사용 하 려는 경우 , dispatcher 는 별도 의 패키지 로 분리 되 어 좀 더 나 은 이름 의 일급 클래스 API 로 공개 될 수 있 다 . 
 실제로 필요 가 있 을 때 까지 조기 추상화 를 피하 는 것 이 좋 다 . 
 updater 필드 와 __ currentDispatcher 객체 는 모두 종속 성 주입 이 라는 일반 적 인 프로그래밍 원칙 의 형태 이 다 . 
 두 경우 모두 렌 더러 는 setState 와 같 은 기능 의 구현 을 일반 React 패키지 에 삽입 하 여 구성 요소 를 보다 선언 적 으로 유지 한다 . 
 이런 것 들 이 React 를 사용 할 때 어떻게 작동 하 는지 생각 할 필요 는 없 다 . 
 React 사용 자 는 의존 성 주입 과 같 은 추상 개념 보다 응용 프로그램 코드 에 대해 생각 하 는 데 더 많 은 시간 을 할애 해야 한다 . 
 그래도 this . setState ( ) , useState ( ) 가 어떻게 동작 하 는지 궁금 했 다면 도움 되 길 바란다 . 
 원문 - How Does setState Know What to Do ? 
 Dan Abramovreact 번역 
 rejoelve 
 " 많 은 사람 들 은 React " 엔진 " 이 각 렌 더러 내부 에 있 다고 생각 한다 ~ " 
 이 단락 을 원문 을 보 고 다시 번역 했 습니다 . 정확 하 게 번역 한 건 아니 고 제 가 이해 하 기 쉽 도록 의역 을 많이 했 습니다 .