React.memo Hook - useMemo, React.memo, useCallback 연산 최적화 할 때 사용 Memoization : 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억(캐싱) 해 두었던 데이터를 반환 시키게 하는 방법 1. App컴포넌트가 처음 Mount될 때 2. useEffect에서 사용한 getData()가 실행되면서 데이터를 가져온 후 App컴포넌트가 리렌더 될 때 다른 state를 수정 시에도 App컴포... memoizationuseCallbackuseMemo컴포넌트최적화React.memoReactReact React.memo, useMemo, useCallback 역할 및 차이점 즉, state가 변경되거나, 새로운 컴포넌트가 렌더링 되는 시점에서, shallow copy를 통해 같은 값인지 판단하고 렌더링 여부를 결정하게 된다. 하나의 컴포넌트가 똑같은 props를 넘겨 받았을 때 같은 결과를 렌더링 하고 있다면 React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지 할 수 있다. React.memo를 사용할 경우 이전과 같은 props가 들어올때는 렌더링 ... ReactReact.memouseCallbackuseMemoReact useCallback vs useMemo(feat. React.memo) 프로젝트를 보다가 useCallback, useMemo, React.memo를 봤는데 정확한 개념을 이해하지 못해서 찾아보기로 했는데 먼저 메모이제이션(memoization)에 대해 알아야 한다 memoization이란 기존에 수행한 연산의 결과 값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 기법으로 중복 연산을 피할 수 있다는 장점이 있다 useCallback의 deps가 변하... useCallbackHoCuseMemoReact.memoHoC フックマスターになりたい (3): useMemo & useCallback! 그러나 조금 다른 방식으로 useMemo와 useCallback에 접근해볼 수 있지 않을까? 오늘 포스팅에서 다룰 것은 랜덤 넘버 제너레이터이다! 위 랜덤 넘버 제너레이터를 살펴보았다면 뭔가 문제가 있다는 점을 알 수 있다! 바로 RandomNum 컴포넌트에 호버할 때마다 랜덤 넘버가 변경된다! 그 이유는 바로 state가 변경될 때마다 컴포넌트가 재렌더링 되기 때문이다! 현재 RandomN... React.memouseMemouseCallbackReact.memo React Hooks, React.memo와 useCallback으로 최적화하기 리액트는 컴포넌트를 렌더링 한 뒤 이전 렌더링된 결과와 비교하여 DOM 업데이트를 결정한다. React.memo() 로 컴포넌트를 감싸면 리액트는 컴포넌트를 렌더링하고 그 결과를 메모이제이션한다. 다음 렌더링 시 리액트는 이전 props가 현재의 것과 같다면 리액트는 메모이제이션한 결과를 재사용해서 성능을 향상시킨다. 문제는 다음인데, IncrementAge 버튼을 눌러보자. 이처럼 Age ... ReactReact.memoReact HooksuseCallbackReact [TIL] React Hook React.memo란? React.memo는 언제 사용하나요? React.memo는 고차 컴포넌트(Higher Order Component)입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, 리액트의 구성적 특성에서 나오는 패턴입니다. React HOC 문서 React.memo에 대해 React 공식문서는 다음과 같이 설명합니다. 당신의 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면,... React.memouseCallbackreact hookReact.memo
Hook - useMemo, React.memo, useCallback 연산 최적화 할 때 사용 Memoization : 이미 계산 해 본 연산 결과를 기억 해 두었다가 동일한 계산을 시키면, 다시 연산하지 않고 기억(캐싱) 해 두었던 데이터를 반환 시키게 하는 방법 1. App컴포넌트가 처음 Mount될 때 2. useEffect에서 사용한 getData()가 실행되면서 데이터를 가져온 후 App컴포넌트가 리렌더 될 때 다른 state를 수정 시에도 App컴포... memoizationuseCallbackuseMemo컴포넌트최적화React.memoReactReact React.memo, useMemo, useCallback 역할 및 차이점 즉, state가 변경되거나, 새로운 컴포넌트가 렌더링 되는 시점에서, shallow copy를 통해 같은 값인지 판단하고 렌더링 여부를 결정하게 된다. 하나의 컴포넌트가 똑같은 props를 넘겨 받았을 때 같은 결과를 렌더링 하고 있다면 React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지 할 수 있다. React.memo를 사용할 경우 이전과 같은 props가 들어올때는 렌더링 ... ReactReact.memouseCallbackuseMemoReact useCallback vs useMemo(feat. React.memo) 프로젝트를 보다가 useCallback, useMemo, React.memo를 봤는데 정확한 개념을 이해하지 못해서 찾아보기로 했는데 먼저 메모이제이션(memoization)에 대해 알아야 한다 memoization이란 기존에 수행한 연산의 결과 값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 기법으로 중복 연산을 피할 수 있다는 장점이 있다 useCallback의 deps가 변하... useCallbackHoCuseMemoReact.memoHoC フックマスターになりたい (3): useMemo & useCallback! 그러나 조금 다른 방식으로 useMemo와 useCallback에 접근해볼 수 있지 않을까? 오늘 포스팅에서 다룰 것은 랜덤 넘버 제너레이터이다! 위 랜덤 넘버 제너레이터를 살펴보았다면 뭔가 문제가 있다는 점을 알 수 있다! 바로 RandomNum 컴포넌트에 호버할 때마다 랜덤 넘버가 변경된다! 그 이유는 바로 state가 변경될 때마다 컴포넌트가 재렌더링 되기 때문이다! 현재 RandomN... React.memouseMemouseCallbackReact.memo React Hooks, React.memo와 useCallback으로 최적화하기 리액트는 컴포넌트를 렌더링 한 뒤 이전 렌더링된 결과와 비교하여 DOM 업데이트를 결정한다. React.memo() 로 컴포넌트를 감싸면 리액트는 컴포넌트를 렌더링하고 그 결과를 메모이제이션한다. 다음 렌더링 시 리액트는 이전 props가 현재의 것과 같다면 리액트는 메모이제이션한 결과를 재사용해서 성능을 향상시킨다. 문제는 다음인데, IncrementAge 버튼을 눌러보자. 이처럼 Age ... ReactReact.memoReact HooksuseCallbackReact [TIL] React Hook React.memo란? React.memo는 언제 사용하나요? React.memo는 고차 컴포넌트(Higher Order Component)입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, 리액트의 구성적 특성에서 나오는 패턴입니다. React HOC 문서 React.memo에 대해 React 공식문서는 다음과 같이 설명합니다. 당신의 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면,... React.memouseCallbackreact hookReact.memo