(11).이정환_react.js강의_최적화의 종류와 React 내부의 최적화

● React에서 최적화의 종류 :

○ 웹서비스에 대한 최적화 종류 :

○ React 내부의 최적화 종류 :

● React에서 최적화의 종류1 "연산 방지"에 대한 최적화 React Hook : useMemo

연산 방지에 대한 상황 :

예를 들어, todoList프로젝트에서, List의 item 총 개수, isDone이 check된 item 개수 , isDone이 uncheck 된 item 개수 출력되도록 할떄, 이것을 렌더링 할때마다, item들을 집계하면서, 계속 계산하면, 좆같으므로, 랜더링 하면서 , 업데이트된 개수들만 계산하는 기법을 useMemo를 말한다.

1_ 실습 준비 :

일단 List 컴포넌트 자리에, List의 item 총 개수, isDone이 check된 item 개수 , isDone이 uncheck 된 item 개수 출력되도록 하는 코드 작성

- LIst.js 일부

const getCount = () => {
    const totalCount = items.length;

    //특정 조건에 해당되는 data 찾기, 삭제 => map (X) , filter() 
    //※map()은 보통 모든 원소 순회할 때, 사용한다.
    const isDoneCount = items.filter((item) => item.isNotDoneCount).length;

    const isNotDoneCount = totalCount - isDoneCount;

    return { totalCount, isDoneCount, isNotDoneCount };
  };

  const { totalCount, isDoneCount, isNotDoneCount } = getCount();

  return (
    <div className="List">
      <p>Todo List🌱</p>
      <div className="printCount">
        <p>총 항목 수 : {totalCount}</p>
        <p>완료된 항목 수 : {isDoneCount}</p>
        <p>미완료된 항목 수 : {isNotDoneCount}</p>
      </div>
      <input
      .
      .

      .

      );

- 그럼 저게 뭐가 문제냐? => 삭제 , 수정 , 추가 기능 이외의 구성변화가 없는 "검색"기능에서도 계산하는 짓거리를 한다.// 즉 쓸데없이 또 계산함

- 관찰과정 :

검색 input 창에 한글자씩 타이핑 할때마다, 계산이 집계되는 것을 테스트 해봄.

해결 방법 : useMemo

- 형식

const {반환하고 싶은 값들 } = useMemo(()=>{
    작동이나 집계하고 싶은 동작 구현부

    return,
} , [매개인자]);//매개인자가 변할때만 , 호출되도록 한다.

- 다시 getCount를 useMemo로 수정

const {totalCount , isDoneCount, isNotCount} = useMemo(()=>{
	console.log('계산중이야 시발련아');
    const totalCount = items.length;
    const isDoneCount = items.filter((item)=>{item.isDone});
    const isNotCount = totalCount - isDoneCount;

    return {totalCount , isDoneCount, isNotCount};

},[items]); //items의 구성이 변할 때만 호출되도록 한다.

 

=> 이제 검색창에 타이핑 한글자 할때마다 집계 안하고, 수정 , 삭제 , 추가 할때만 , 집계를 할 것이다.