Static Badge

대표적인 SPA (Single Page Application) 라이브러리

SPA ?

  • 하나의 HTML 파일로 구성된 Application → CSR 방식으로 랜더링 (SPA 방식이 모두 CSR인것은 아님)
  • 페이지 이동 , 업데이트를 이 하나의 HTML 파일에서 내부적으로 수정해서 보여주는 방식
  • 즉 최초 페이지를 로딩한 시점부터 페이지 리로딩이 없고, 필요한 데이터만 서버로부터 받아와 UI를 업데이트 해준다.
  • 네이티브 앱과 비슷한 사용자 경험을 제공해준다.
  • SPA로 개발하게 되면 기능단위등으로 컴포넌트를 분리하기 쉽고 , 컴포넌트의 재활용성도 높아졌다.

CSR (Client Side Rendering)

  • 서버로부터 CSR을 구현할 수 있는 최소한의 구조만 갖춰진 HTML 파일 받는다.
  • 링크된 어플리케이션 자바스크립트 파일을 받아와서 화면을 구성한다.
    • 어플리케이션에서 필요한 로직 , 구동하는 소스코드들이 포함됨
  • 어플리케이션 자바스크립트 파일을 통해서 동적으로 HTML 요소를 구성함
  • 초기 로딩시간이 오래 걸린다. → code splitting 으로 해결
  • SEO(검색엔진) 가 좋지 않다. → 검색엔진 크롤봇들은 HTML문서를 탐색해서 정보를 수집하기때문
  • CSR 은 TTV(Time To View) , TTI(Time To Interact)가 동시에 가능하게 됨
    • 화면에 보이는 순간 해당 요소의 기능도 동작 할 수 있음

SSR (Server Side Rendering)

  • 서버로부터 이미 구현된 HTML 파일을 받아와 화면에 보여준다. → SEO가 좋다.
  • 이후 비즈니스 로직이나 동적으로 제어 할 수있는 JS 파일을 받아온다.
  • 이렇기 때문에 SSR 은 TTV 와 TTI 의 공백시간이 존재한다.

Hook

  • class의 단점 보완 , 재사용성 강화
  • 최상위에 작성해야함 (함수 블럭 안에 작성하면 안됨)
  • 함수형 컴포넌트 안에서만 사용

Composition (합성)

  • 컴포넌트를 설계할때 고려되는 것
  • 컴포넌트에 컴포넌트를 담는 것
    • props로 받은 children를 그래도 보여주기
    • props를 커스텀해서 유의미한 컴포넌트를 담을수도 있음

HOC (Higher Order Component)

  • 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수

memo

  • HOC
  • Memoization
    • 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장해서 사용하는 것
  • props 바뀌지 않는 컴포넌트는 memo(Component) 통해 리렌더 되지 않음

useCallback

  • callback 함수 props를 메모이제이션 하면서 컴포넌트가 리렌더 되는것을 막음
  • 함수를 메모이제이션 할때
  • useEffect 와 비슷하게 의존성 배열이 존재하면 다시 재 생성됨

useMemo

  • 변수를 메모이제이션 할때
  • 함수의 리턴 값을 메모이제이션 한다.