hook
-
[Hooks] useCallback과 React.memo개발/React 2021. 3. 2. 22:09
재사용이라는 관점에서 useCallback은 useMemo와 비슷하다. useMemo는 추가한 deps가 바뀌지 않으면 함수를 호출하지 않고 기존 값을 사용하게 하는 것이고, useCallback은 deps가 변경될 때만 함수를 새로 생성하게 해준다. 보통은 컴포넌트가 re-render될 때마다 함수가 새롭게 만들어진다. 성능 최적화를 할 때 useCallback을 쓰는데, 최적화가 가능한 컴포넌트에 잘 써야 하며 모든 컴포넌트가 최적화가 필요한 것은 아니다. 최적화를 하기 위해서 코드가 추가되어야 하기 때문이다. useCallback만으로는 최적화가 끝나지 않는다. React.memo와 같이 써야 한다. 컴포넌트 re-render를 최적화 할 때, 함수가 매번 새로 생성되면 최적화가 일어나지 않으므로 ..
-
[Hooks] useMemo개발/React 2021. 2. 25. 17:55
useMemo 훅은 재사용하는 값이 있을 때 그 값을 구하는 함수를 다시 호출하지 않고 기존 값을 쓰도록 해줍니다. 다음과 같은 함수가 있고 이를 return 함수 전에 호출해 count 변수에 담아 호출해봅시다. 기본적인 동작 흐름은, 화면에 출력된 사용자 아이디를 클릭하면 active 객체의 값이 true가 되므로 countActiveUsers 함수를 통해 활성화된 user의 개수를 셉니다. useMemo를 이용해 countActiveUsers 함수를 감싼 이유는, input의 값이 변경될 때마다 onChange가 호출되면서 State가 변경되어 re-render가 이루어지고 매번 countActiveUsers 함수를 호출하기 때문입니다. {count}는 c++의 개념으로 l-value인데, 함수가 ..