2. Shop(4)

성능잡기

• 함수나 오브젝트는 변수에 담아쓰는게 좋다
• 애니메이션 줄 때 레이아웃 변경 애니메이션(transition 등) 대신 transform, opacity 같은 속성을 이용하면 좋다

---

lazy / Suspense

• 모든 컴포넌트파일을 import 해오면 사이트 초기 접속속도가 느려질 수 있기 때문에 특정 컴포넌트가 필요해질때 import 해달라고 요청할 수 있다
• 'react' 라이브러리에서 {lazy, Suspense}를 import 해온다
• 원래의 import 대신 const Component이름 = lazy(() => import('./경로') ); 사용
• 사용을 원하는 컴포넌트를 <Suspense> 태그로 감싸주고 태그안에 fallback={컴포넌트 로딩 전까지 띄울 원하는 HTML} 속성을 넣을 수 있다

// 예시

import React {useState, ... lazy, Suspense} from 'react'
const Detail = lazy(() => import('./Detail.js') );

function App(){
  return (
    
    <Suspense fallback={ <div> 로딩중입니다 </div> }>
      <Detail />
    </Suspense>
    
  )
}

---

Memo

• props 변경이 안된 불필요한 컴포넌트의 재랜더링을 막아준다

React.memo

• 컴포넌트의 결과 값을 memoized하여 불필요한 re-rendering을 관리
• 오직 props가 변경됐는지 아닌지만 체크한다
• React.memo(component, compFunc)
  • React.memo의 두 번째 매개변수로 속성값 비교 함수를 입력한다
  • 속성값 비교 함수에서 true를 반환하면 이후 단계를 생략하고 이전 렌더링 결과를 재사용한다
  • 만약 속성값 비교 함수를 입력하지 않으면 얕은 비교를 수행하는 기본 함수가 사용된다
• callback 함수는 re-rendring이 될 때마다 새로운 참조값을 갖게 된다
• 따라서 props로 함수(또는 객체, 배열과 같은 reference type)를 받을경우 함수의 내용은 같더라도 참조값이 다르다면 rendering이 발생하기 때문에 React.memo는 오히려 memoization에 쓸데없는 메모리만 낭비한다
• 이때 useCallback을 사용하여 리렌더링을 방지할 수 있다

useMemo

• 함수의 결과 값을 memoized하여 불필요한 연산을 관리
• 'react' 라이브러리에서 {useMemo}를 import 해온다
• const 변수명 = useMemo(function, [deps])
  • 첫번째 인자 : 계산된 값을 return하는 callback 함수
  • 두번째 인자 : 검사할 특정 값을 담은 배열, 하나라도 변경되면 재계산
• 함수 호출 이후의 return 값이 memoized되며 두 번째 파라미터인 배열의 요소가 변경될 때마다 첫 번째 파라미터의 callback 함수를 다시 생성한다 배열에 아무것도 없을 경우 재생성되지 않는다

---

PWA

• Progressive Web App 웹사이트를 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 일종의 웹개발 기술
• 스마트폰, 태블릿 바탕화면에 웹사이트 설치가능, 오프라인에서도 동작, 설치 유도비용 절약
• 처음 프로젝트 만들때 --template cra-template-pwa를 포함시켜준다

npx create-react-app 프로젝트명 --template cra-template-pwa

• index.js 파일의 하단에 unregister부분을 register로 변경해준다

→ serviceWorkerRegistration.register();

• build를 해주면 manifest.json파일과 service-worker.js파일이 자동생성되고 PWA 발행이 끝난다