0장. 들어가며

• 리액트를 선호하는 이유
  • 명시적인 상태 변경 : 리액트의 단방향 바인딩 지원

    • 단방향 바인딩 : 데이터의 흐름이 한 쪽으로만 간다.

      → 데이터 흐름의 변화가 단순하기 때문에 코드가 읽기가 쉽다.

      ⇒ 장점 : 상태 변화의 원인 파악이 쉬움. 버그 가능성이 적음.

      ⇒ 단점 : 코드의 규모 증가(변화를 감지하고 업데이트하는 코드)

    • 양방향 바인딩 : 데이터의 흐름이 양방향으로 간다.

      ⇒ 장점 : 편리함

      ⇒ 단점 : 코드의 규모가 커질수록 상태 변화의 원인을 파악하기 어려워짐

      ← 데이터의 변화가 컴포넌트에 영향을 미칠 수도, 반대로 컴포넌트의 상태가 변경되면 데이터의 상태도 변할 수 있기 때문

  • JSX 사용
  • 배우기 쉽고, 커뮤니티가 강력함
• 페이스북의 기존 개발 환경의 한계점 파악 및 react 도입의 역사
  • 실시간 사용자 경험을 반영하고 싶었음 (좋아요 버튼 클릭 시, 좋아요 개수 바로 반영)
  • 그런데, 기존 방법은 이러한 작업이 모두 서버 렌더링으로만 작동함
  • 상태 변경할때마다 브라우저 전체가 다시 로딩되어 전체 화면이 깜빡이거나 느리게 동작하는 등의 문제 발생
  • 변경된 DOM 추적도 어렵고, 왜 이렇게 변경됐는지 추적도 어려워 수많은 버그가 발생하기도 했음.
  • 모델이 뷰를 변경하는 단방향 방식으로 렌더링 하도록 방식을 바꿔보자!