최적화

웹 서비스의 구현에 필수적인 항목(서버 성능 개선, 로딩 속도 개선, 불필요한 재연산 방지, etc…)

• useMemo
  특정 함수 호출 시 정해진 조건을 만족해야 호출될 수 있도록 하는 Hook

// ex)
// 첫번째 인수로 callback 함수를 넣고, 리렌더를 원하지 않는 연산을 작성
const {totalCount, doneCount, notDoneCount} = useMemo(() => {
    const totalCount = todos.length;
    const doneCount = todos.filter((todo) => todo.isDone).length;
    const notDoneCount = totalCount - doneCount;
    return {
      totalCount,
      doneCount,
      notDoneCount,
    };
  }, [todos]); // 두번째 인수로 리렌더를 원하지 않는 상황 or 조건을 명시

-> 복잡한 컴포넌트를 불필요하게 리렌더 시 성능 저하 야기

• memo
  최적화된 컴포넌트를 받아와 할당하는 Hook

// ex)
import { memo } from 'react';

function Header(){

  return <div className="Header">
    <h1>
      {new Date().toDateString()}
    </h1>
  </div>
}
// 최적화시킬 컴포넌트를 인수로 작성
export default memo(Header);

컴포넌트를 할당 받은 변수는 어떠한 props도 받지 않기 때문에, 리렌더 대상에서 제외 가능
🚫단, 원시값과 같은 변화되지 않는 값이 아닌 참조 자료형이 변경되는 경우 리렌더 대상

import { memo } from 'react';

function TodoItem(
  {id, isDone, createdDate, content, onUpdate, onDelete}
) {

  const onChangeCheck = () => {
    onUpdate(id);
  }

  const onClickDeleteBtn = () => {
    onDelete(id);
  }

  const addClassName = isDone ? 'checked' : '';

  return <div className="TodoItem">
    <input onChange={onChangeCheck} type="checkbox" checked={isDone}/>
    <div className={`content ${addClassName}`}>{content}
      </div>
    <div className='date'>{new Date(createdDate).toLocaleDateString()}</div>
    <button onClick={onClickDeleteBtn}>삭제</button>
  </div>
}

export default memo(TodoItem); // 원래 정상적으로 작동해야하나, onUpdate와 onDelete는 App 컴포넌트로부터 가져온 참조 자료형이므로 App이 리렌더 될때마다 같이 리렌더됨 -> 제외 불가

• useCallback
  함수의 재생성을 방지하는 리액트 Hook

import { useCallback } from 'react';

// 첫번째 인수로 재생성을 방지할 함수, 두번째 인수로 의존성 배열 추가
const onUpdate = useCallback( (targetId) => {
    dispatch({
      type: "UPDATE",
      data: targetId
    })
  }, []);

  const onDelete = useCallback( (targetId) => {
    dispatch({
      type:"DELETE",
      data: targetId
    })
  }, []);

-> Deps에 아무것도 넣지 않을시, mount 함수 구현의 로직과 비슷하게 한번 생성 후 추가 생성X