UI = f(state), UI = f(data)

오랜만에 overreacted 를 살펴보다가 재밌는 내용들이 있어서 기록.

React 멘탈 모델을 일종의 방정식으로 설명하는 것을 보셨을 것입니다: UI는 state의 함수, 즉 UI = f(state)입니다. 이는 UI 코드가 말 그대로 state를 인수로 받는 단일 함수여야 한다는 뜻이 아니라, 현재 상태가 UI를 결정한다는 의미입니다. 상태가 변경되면 UI를 다시 계산해야 합니다.

UI = f(state) 여기서 state는 클라이언트 측이고 f는 클라이언트에서 실행됩니다. 이 접근 방식을 사용하면 <Counter />와 같은 즉각적인 대화형 컴포넌트를 작성할 수 있습니다. (여기서 f는 초기 상태와 함께 서버에서 실행되어 HTML을 생성할 수도 있습니다.)

UI = f(데이터) 여기서 데이터는 서버 측이고 f는 서버에서만 실행됩니다. 이 접근 방식을 사용하면 <PostPreview />와 같은 데이터 처리 컴포넌트를 작성할 수 있습니다. (여기서 f는 서버에서만 범주형으로 실행됩니다. 빌드 시간은 "서버"로 계산됩니다.)

그러나 실제로는 실제 ‘공식’은 UI = f(데이터, 상태)에 더 가깝습니다. 데이터가 없거나 상태가 없는 경우 이 공식은 그 두 가지 경우로 일반화됩니다. 하지만 이상적으로는 다른 추상화를 선택할 필요 없이 두 가지 경우를 모두 처리할 수 있는 프로그래밍 패러다임을 선호하며, 여러분 중 적어도 몇 명은 이를 원할 것으로 알고 있습니다.

전문은 여기.