2021-10-09 WIL (React Lifecycle, WebVitals, Code splitting, image sprite, promise)

calvin9150 2021. 10. 4. 10:37

1. WebVitals

LCP : 로딩 성능(페이지에서 가장 큰 콘텐츠의)을 측정한다 .
우수한 UX를 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 함.
FID : 상호 작용을 측정. 우수한 UX를 제공하려면 페이지의 FID가 100ms 이하여야 함.
CLS : 시각적 안정성 측정. 페이지에서 0.1 이하의 CLS를 유지해야 함.
FCP : 브라우저가 화면에 그려지기 까지의 시간 측정
TTFB : 첫번째 요청과 그 응답을 받는데 까지 걸리는 시간 측정

2. Code splitting
- 빌드된 앱에선 기본적으로 1개의 파일에 모든 로직이 들어가게 된다. 그러면 프로젝트가 커질수록 해당 파일의 용량도 커지게 될텐데, 페이지 로딩 시간도 길어지게 될 것 이다. 코드 스플리팅은 당장 필요한 코드가 아니면 따로 분리시켜서 필요할때만 불러와 사용할 수 있다.

3. image sprite

- 아이콘 등 조각 이미지를 하나에 몰아서 만들고, css로 나누어 사용하는 것. background-position, background-image 속성을 이용한다.

4. 프로미스와 비동기

- 비동기 처리란? 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.

- 자바스크립트에서는 비동기 프로그래밍의 한가지 방식으로 callback 패턴을 많이 사용했다.
콜백 패턴은 비동기 작업이 길어질수록 콜백이 깊어지고 , 또한 에러 핸들링 및 디버깅이 어렵다.

그런 콜백의 문제점을 해결하기 위해 Promise 패턴이 등장했다.
비동기 작업을 콜백이 아닌 then 으로 연결하고 , catch 로 에러 핸들링 및 디버깅을 편하게 할 수 있다.

각 프로미스는 비동기 연산이 아직 완료되지 않았음을 가리키는 보류(pending) 상태에서 시작하여 짧은 생명주기를 통과한다. 보류 프로미스는 미확정(un-settled) 상태로 간주된다.

비동기 연상이 완료되면 이 프로미스는 확정(settled) 상태로 간주 되고 두가지 가능한 상태중 하나가 된다.

대기중(pending) : 결과를 기다리고 있는 상태
이행됨(fulfilled) : 수행이 정상적으로 끝났고 결과 값을 갖고있는 상태
거부됨(rejected) : 수행이 비정상적으로 끝난 상태

즉, 비동기적으로 작업이 실행되는데
작업이 종료 된 후에 실행이 잘 성공했는지 , 혹은 실패했는지 , 성공과 실패 결과값이 무엇인지 반환을 해주는 객체이다.

5. React Lifecycle

5-1) 클래스 기반 Lifecyle
- 크게 세가지 유형으로 나눌 수 있는데 생성 될때, 업데이트 할 때, 제거할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 한다. 여기서 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다.

컴포넌트가 처음 실행될 때 그것을 Mount라고 표현한다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장합니다. 그 후에 componentWillMount 메소드를 호출한다. 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 후 componentDidMount가 호출된다.

주의할 점은, componentWillMount에서는 props나 state를 바꾸면 안 된다. Mount 중이기 때문. 그리고 아직 DOM에 render하지 않았기 때문에 DOM에도 접근할 수 없다.

5-1-1) State Update
setState 호출을 통해 state가 업데이트될 때의 과정이다. props update와 과정이 같지만, componentWillReceiveProps 메소드는 호출되지 않는다. 그리고 메소드의 두 번째 인자로는 바뀔 state에 대한 정보를 가지고 있다. componentDidUpdate는 두 번째 인자로 바뀌기 이전의 state에 대한 정보를 가지고 있다.

5-1-2) Unmount
컴포넌트가 제거되는 것은 Unmount라고 표현한다. 더는 컴포넌트를 사용하지 않을 때 발생하는 이벤트가 있다. componentWillUnmount인데, componentWillMount에서 주로 연결했던 이벤트 리스너를 제거하는 등의 여러 가지 정리 활동을 한다.

5-2) Hooks의 Lifecycle
Hooks에서는 useEffect를 통해 Lifecycle을 관리한. useEffect는 클래스 기반 Lifecycle 메소드에서 componentDidMount와 componentDidUpdate, componentWillUnmont 세 가지 역할을 할 수 있다.

5-2-1) componentDidMount, componentDidUpdate 수행
useEffect는 컴포넌트 안에서 불러내어 state변수나 props에 접근이 가능하고, 기본적으로 첫번째 렌더링과 이후의 모든 업데이트에서 수행된다. 두번째 인자로 조건을 걸어 첫번째 렌더링이나 특정한 조건일때만 수행되도록 하는 것도 가능하다.

  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트 한다.
    document.title = `You clicked ${count} times`;
  });

5-2-2) 정리(clean-up)의 실행
모든 effect는 정리를 위한 함수를 반환할 수 있다. 이 점이 구독의 추가와 제거가 하나의 effect를 구성하는 것이다. 정리되는 시점은 컴포넌트가 마운트 해제되는 때에 실행된다.

  useEffect(() => {
      console.log("첫번째 렌더링과 이후의 모든 업데이트에서 실행!")

    return function cleanup() {
       console.log("컴포넌트가 unmount 되면 실행!")
    };
  });

5-2-3) Effect를 건너뛰어 성능 최적화
모든 렌더링 이후에 effect를 정리하거나 적용하는 것이 때때로 성능 저하를 발생시키는 경우도 있다. 특정 값들이 리렌더링 시에 변경되지 않는다면 effect를 건너뛰도록 할 수 있다. useEffect는 선택적으로 두번째 인수를 배열로 넘기면 가능하다.

const [count, setCount] =useState(true);

useEffect(() => {
  console.log("count가 update될 때마다 실행!")
}, [count]);