React란

2013년에 올라온 Pete Hunt: React: Rethinking best practices -- JSConf EU 영상을 보다가 공부 목적으로 가볍게 정리하였다. 번역 등이 매끄럽지 않거나 정확하지 않은 내용이 있을 수 있다.ㅠ

1. 리액트는 템플릿이 아닌 컴포넌트에 관한 것이다.

• 리액트는 본질적으로 렌더링 로직이 UI 로직과 연결된다는 사실을 받아들인다. 리액트는 이 둘을 모두 포함하는 컴포넌트라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리한다.
  • UI 로직이란, 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등을 일컫는다.
  • 관심사의 분리
    • 결합도(coupling)를 줄이기, 그리고 응집도(cohesion)를 높이기
      • 결합도는 어떤 모듈이 다른 모듈에 의존하는 정도를 나타내는 것이다.
      • 응집도는 모듈 내부의 기능적인 응집 정도를 나타낸다.
    • 템플릿은 낮은 관심사의 분리를 부추긴다.
    • MVC는 훌륭하다. 하지만 컨트롤러 또는 모델, 심지어 뷰도 뚱뚱해지는 경향이 있다.
    • 이를 해결하기 위한 도구는 리액트 컴포넌트이다.
      • 리액트 컴포넌트는 다른 컴포넌트들과 느슨히 결합되며 UI를 위한 강한 응집도의 빌딩 블럭이다.
      • 컴포넌트는 재사용 가능하다.
      • 컴포넌트는 조립 가능하다.
      • 컴포넌트는 유닛 테스트가 가능하다. 결국 컴포넌트는 유닛이다.
      • 스파게티코드를 만들지 말고, 컴포넌트를 작게 유지하자. 컴포넌트에는 오직 디스플레이 로직 만 넣자.
        • JSX는 HTML 같은 문법을 사용하기 위한 선택적 전처리기이다.
          • <a href="http://instagram.com/test">@test on Instagram</a> 과 같은 JSX코드는 React.DOM.a({href: 'http:/instagram.com/test'}, '@test on Instagram')로 번역된다.
          • 이러한 특성 덕분에, 디자이너들이 코드에 기여하기 쉽다.
      • 리액트 컴포넌트는 기본적으로 그저 멱등(idempotent) 함수이다.
        • 멱등성은 연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 의미한다
        • 컴포넌트는 어느 시점에서든 UI를 서버 렌더된 앱의 방식처럼 보여준다. 컴포넌트는 함수일 뿐이기 때문에, 매개변수를 받고 UI 표현을 결과로 내보낸다. 따라서 유닛테스트가 매우 쉽다.

2. 데이터가 변경될 때마다 모든 앱이 리렌더링된다.

• 이와 같이 매 변화에 대한 리렌더링은 심플하게 만든다. 화면에 표시된 모든 데이터가 최신의 것임을 보장되기 때문이다.(비싸고 더러운 모델 확인 과정 없이도 마법처럼 데이터바인딩이 된다)
• 더 이상 직접적인 DOM 조작은 없다. 모든 것은 선언적으로 된다.
• 하지만 매 변화에 대하여 리렌더링한다? 그것으로 인한 비용은 비싸 보인다.

3. 그래서 Virtual DOM을 구축했다.

• 이는 모든 변화에 대한 리렌더링을 신속하게 한다.
• "텍스트 필드에 적고 있던 것을 잃고 싶지 않으며, UI가 깜박거리는 것도 원하지 않는다. 사용자가 있던 스크롤 포지션을 읽고 싶지 않다. "이러한 것들이 가상 DOM을 구축한 이유이다.
• 성능과 메모리 흔적에 대하여 최적화한다.
• 어떻게 하는가?
  • 업데이트할 때마다
    • 리액트는 새 가상 DOM 하위 트리를 만들고 오래된 것과 구별한다.
    • 리액트는 DOM 변화의 최소 세트를 계산하여 큐에 넣는다.
    • 그리고 모든 것을 실행하고 업데이트한다.