[프리온보딩] Memoization
Memoization Memoization란? Memoization은 특정한 값을 저장해뒀다가, 이후에 해당 값이 필요할 때 새롭게 계산해서 사용하는게 아니라 저장해둔 값을 활용하는 테크닉. useMemo useMemo는 리액트에서 값을 memoization 할 수 있도록 해주는 함수. // useMemo(callbackFunction, deps] const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); useMemo는 두가지 인자를 받는다. 첫번째 인자는 콜백함수이며 이 함수에서 리턴하는 값이 메모된다. 두번째 인자는 의존성 배열이다. 메모이제이션을 할 때 주의해야 할 점은 만약 새로운 값을 만들어서 사용해야 하는 상황임에도 불..
- 대외활동/[KT AIVLE School] 프리온보딩 프론트엔드
- · 2023. 11. 30.
[프리온보딩] React.memo
React.memo React.memo 란? 리액트는 state가 변할 경우 해당 컴포넌트와 하위의 컴포넌트들을 모두 리렌더링한다. 그런데 state가 변한 컴포넌트의 경우 당연히 UI의 변화가 있을 것이기에 리렌더링을 해야 하지만, 하위 컴포넌트의 경우에는 경우에 props가 변화하지 않았다면 해당 컴포넌트가 UI가 변화하지 않았을 수도 있을 것이다. 이런 경우에는 굳이 새롭게 컴포넌트 함수를 호출할 필요 없이 이전에 저장되어 있던 결과를 그대로 사용하는 것이 효율적이다. 하지만 UI가 실질적으로 변화되었는지 안되었는지를 매번 리액트가 렌더링 과정에서 일일이 모든 컴포넌트 트리를 순회하면서 검사하는 것은 비효율적이기 때문에, 리액트에서는 개발자에게 이 컴포넌트가 리렌더링이 되어야 할지 아닐지에 대한 여..
- 대외활동/[KT AIVLE School] 프리온보딩 프론트엔드
- · 2023. 11. 30.