반복되는 불필요한 렌더링을 막아보자.

• useCallback을 사용하면 해당 컴포넌트가 렌더링 되더라도 그 함수가 의존하는 값(deps)들이 바뀌지 않는 한 기존 함수를 재사용할 수 있음.
• useState의 2번째 인자인 setData에 함수형을 써줘야함.
  : 함수형 업데이트(값 대신 함수를 전달하는 것)를 통해 불필요한 렌더링 막기
  : setData에 전달되는 parameter에 최신 state가 전달되는 것이기 때문에, 최신 state를 이용하기 위해서는 항상 함수형 업데이트의 인자부분에 데이터를 사용해줘야 함.
  : 또 return 부분의 데이터를 사용해야 최신형 업데이트 데이터를 사용할 수 있겠쬬.
• 그럼 deps에 빈배열을 줘도 됨.

	...

      setData((data) => [newItem, ...data]); //함수형 업데이트: 함수를 전달하는 것
    },

    []
    ...

렌더링을 막으면 메모리 최적화를 할 수 있음.

일단 최적화의 시작은 React.memo로 묶어주는 것임

이후에 useCallback(함수형 업데이트, [])