컴포넌트

자바스크립트의 발전과 컴포넌트

• 자바스크립트가 발전하며 브라우저단에서는 렌더링을 하고, 서버에서는 REST API, GraphQL 같이 브라우저 렌더링에 필요한 데이터만 제공하는 형태로 변화
• 즉, 직접적으로 DOM을 다루는 것은 감소하고 상태(state)를 기준으로 DOM을 렌더링하는 형태로 발전
  (이 과정에서 React, Angular, Vue와 같은 프레임워크,라이브러리가 탄생)
• 이러한 과정속에서 Client-Side Rendering과 상태관리라는 개념이 생기게 됨.
  (Redux, VueX와 같은 상태관리 라이브러리(프레임워크)가 탄생)

전역관리시스템

• Vue, React와 같은 프레임워크의 주된 목적 중 하나가 상태를 기반으로 DOM을 렌더링 하는 것이다.
• Observer Pattern
  • 객체의 상태 변화를 관찰하는 관찰자(Observe)의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 Observer에게 통지하도록 하는 디자인 패턴(publish/subscriber 모델)
• Proxy
  • Proxy객체는 기본적인 동작의 새로운 행동을 정의할 때 사용
  • 객체에 수행되는 동작을 가로챌 수 있고 커스터마이징도 할 수 있다.
  • ES6에서는 모든 트랩에 대하여 포워딩을 도와주는 Reflect이라는 객체와 취소를 할 수 있는 Revocable proxy가 추가되었다.

서버 API와 Sever cache

• 프론트엔드에서 일어나는 서버 API로부터 데이터를 받아 렌더링하는 과정
  1. 데이터를 불러온다(비동기)
  2. 데이터를 호출한 컴포넌트 state로 정의한다.
  3. 이 state를 필요한 컴포넌트의 props로 전달한다.
• 문제점
  • 1번: 언제 불러오는가?
  • 2번: 어디서? 어느 컴포넌트에서 state로 정의하는가?
• 불필요한 네트워크 비용을 줄이기 위해 필요한 시점에 데이터를 불러와야한다.
  • 즉, 데이터를 필요로하는 컴포넌트에서 데이터를 호출하는 것이 좋다.
  • 단, API응답구조와 컴포넌트 트리가 일치하리라는 보장은 없기에 이점에 유의해야한다.