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 React.memo 를 사용한 컴포넌트 리렌더링 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수에 대해 알아보자. 그런데, User 중 하나라도 수정하면 모든 User 들이 리렌더링되고, CreateUser 도 리렌더링이 되는 것을 볼 수 있다. deps 에 users 가 들어있기 때문에 배열이 바뀔 때마다 함수가 새로 만들어지는건 당연하다. 이것... React.memoReact.memo React 렌더링 최적화 (2) useMemo 는 React Hook중 하나로 간편하게 을 수행할 수 있게 해주는 함수이다. 메모이제이션(memoization)은 중복 연산을 피할 수 있게 해주기 때문에 메모리를 조금 더 쓰더라도 어플리케이션의 성능을 최적화할 수 있다. 이 기능을 위한 함수가 React Hook에서는 useMemo 이다. useMemo는 리렌더링 후의 값과 기존 값이 동일한 경우 다시 값을 구하는 것이 아... React.memouseMemouseCallbackReact.memo React 최적화 방법(React.memo, useCallback) 함수형 컴포넌트를 export할 때, React.memo로 wrapping하여 최적화한다. React.memo는 인자로 받은 컴포넌트에 어떤 props가 들어가는지 확인한다. 그리고 모든 props 값을 확인하고 그 값을 props가 이전에 받은 값과 비교하여, props 값이 변경된 경우에만 컴포넌트를 재실행 및 재평가한다. 부모 컴포넌트가 바뀌었지만 props는 바뀌지 않은 경우, 해당 ... useCallbackReactReact.memo최적화React
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 React.memo 를 사용한 컴포넌트 리렌더링 컴포넌트의 props 가 바뀌지 않았다면, 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 React.memo 라는 함수에 대해 알아보자. 그런데, User 중 하나라도 수정하면 모든 User 들이 리렌더링되고, CreateUser 도 리렌더링이 되는 것을 볼 수 있다. deps 에 users 가 들어있기 때문에 배열이 바뀔 때마다 함수가 새로 만들어지는건 당연하다. 이것... React.memoReact.memo React 렌더링 최적화 (2) useMemo 는 React Hook중 하나로 간편하게 을 수행할 수 있게 해주는 함수이다. 메모이제이션(memoization)은 중복 연산을 피할 수 있게 해주기 때문에 메모리를 조금 더 쓰더라도 어플리케이션의 성능을 최적화할 수 있다. 이 기능을 위한 함수가 React Hook에서는 useMemo 이다. useMemo는 리렌더링 후의 값과 기존 값이 동일한 경우 다시 값을 구하는 것이 아... React.memouseMemouseCallbackReact.memo React 최적화 방법(React.memo, useCallback) 함수형 컴포넌트를 export할 때, React.memo로 wrapping하여 최적화한다. React.memo는 인자로 받은 컴포넌트에 어떤 props가 들어가는지 확인한다. 그리고 모든 props 값을 확인하고 그 값을 props가 이전에 받은 값과 비교하여, props 값이 변경된 경우에만 컴포넌트를 재실행 및 재평가한다. 부모 컴포넌트가 바뀌었지만 props는 바뀌지 않은 경우, 해당 ... useCallbackReactReact.memo최적화React