리액트를 다루는 기술을 참고하여 기술하였습니다.
useMemo라는 기능이 있다.
앞서서 useEffect에 대해서 공부를 햇는데 복습을 다시 해보자면
useEffect는 어떠한 조건을 만족하거나 값이 변하거나 하면 리렌더링 하게 하는것이다.
반면에 우리는 전체 페이지를 리렌더링을 하게 되면 화면의 전환이 클테고 그렇게 되면 리액트를 사용한 웹 앱의 장점인 부드러운 전환이 잘 안될수도 있다.
이를 앞서서 위를 좀더 멋있는 말로 설명할수 있는데
메모라이제이션(memorization)
memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말한다.
memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다.
React Hooks: useMemo 사용법
React Hooks 중 하나인 useMemo 함수를 왜/언제/어떻게 써야하는지 알아보겠습니다. useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 짚고 넘어가겠습니다. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있습니다.
https://www.daleseo.com/react-hooks-use-memo/
참조했다.
리렌더링 될시에 원하지 않는 부분이 리렌더링 되는것을 막기 위해서 useMemo를 사용하게 된다.
useMemo(function, deps)
*useMemo(function, [])이렇게 사용하면 된다.
하지만 이렇게 쓰면 절대 이해를 못하지 나도못한다. 왜냐? 나는 아무것도 모르기 때문에
그래서 좀더 디테일 하게 설명하자면,
그냥 우리가 원하는 어떠한 state값이 변환될때 ==== 렌더링됨.
useMemo(() ⇒ function(state),[state])이렇게 작성하면, state라는 변수가 변경될때 만! 리렌더링 되는 것이다.
Uploaded by N2T