useCallback

useMemouseMemo는 비용이 큰 연산에 대한 결과를 저장(메모이제이션)해 두고, 저장된 값을 반환하는 Hook이다. useMemo는 React에서 최적화를 떠올릴 때 가장 먼저 언급되는 Hook이다.import { useMemo } from 'react'const memoizedVAlue = useMemo(() => expensiveComputation(a,b),[a,b]) 첫 번째 인수로는 어떤 값을 반환하는 생성 함수를, 두 번째 인수로는 해당 함수가 의존하는 값의 배열을 전달한다. useMemo는 렌더링 발생 시 의존성 배열의 값이 변경되지 않았으면 함수를 재실행하지 않고 기억해둔 값을 반환하고 변경되었다면 함수를 다시 실행한 결과값을 반환하고 그 값을 기억할 것이다. 이러한 메모이제이션은 ..

리액트의 렌더링부라우저에서의 렌더링이란 HTML과 CSS 리소스를 기반으로 웹페이지에 필요한 UI를 그리는 과정이다. 사용자가 보게되는 결과물을 만드는 작업이기 때문에 중요한 과정이며 렌더링 방식이 성능에 큰 영향을 주게된다. 리액트의 렌더링이란리액트에서의 렌더링은 브라우저 렌더링에 필요한 DOM 트리를 만드는 과정을 의미한다. 이는 모든 컴포넌트들이 갖는 props와 state의 값을 기반으로 DOM 결과를 브라우저에 제공할 것인지 계산하는 과정이다.해당 컴포넌트가 props와 state 같은 상태값을 갖고 있지 않다면 반환하는 JSX 값에 기반해 렌더링이 일어나게 된다.  리액트 렌더링 트리거리액트에서 렌더링이 발생하는 시나리오는 다음과 같다.최초 렌더링: 사용자가 처음 애플리케이션에 진입한 경우클래..