# useCallback

React Hooks 이해하기 (2)
useState로만상태를 새롭게 업데이트하는 로직이 복잡할 때 상태 업데이트 로직을 따로 분리할 수 있다.useState와 useRef 모두 상태관리를 위해 사용할 수 있습니다. 다만 useState의 경우 state변화 후에 re-rendering을 진행하는 반면 u

useMemo, useCallback
useState, useEffect, useRef만 알지말고 useMemo, useCallback도 알아보자.const memoizedValue = useMemo(() => expensiveWork(num), \[num]) 이런식으로 useMemo는 두번째 인자에오는

[React] 9. react-hooks(useMemo, useCallback, useContext)
이어서 hooks API를 보도록 하겠습니다.useMemo는 하나의 상태값을 변경하였을 때 해당 컴포넌트가 다시 랜더링이 될때 불필요한 작업들을 하는경우가 발생합니다.전에 했던 Hooks를 사용한 예제를 통해 설명드리겠습니다.Hedaer.jsxcount 함수에 log

React - velopert html 정리(2)
(본 글은 Velopert님의 https://react.vlpt.us/ 를 정리한 내용입니다.): class형 컴포넌트에서 componentDidMount, componentDidUpdate와 같은 lifeCycle을 hooks에서는 useEffect로
React - useMemo, useCallback
함수형 컴포넌트는 그냥 함수입니다. 함수형 컴포넌트는 단지 jsx를 반환하는 함수입니다.컴포넌트가 렌더링 된다는 것은 누군가가 그 함수(컴포넌트)를 호출해서 사용하는 것을 말합니다. 함수가 실행될 때마다 내부에 선언되어 있던 표현식(변수, 또다른 함수)도 매번 다시
React Hooks #8 useMemo(), useCallback()
메모이제이션(memoizaition) \- 컴퓨터 프로그램이 같은 계산을 반복할 때, 이전 계산값을 메모리에 저장하여 반복수행 제거, 실행속도를 빠르게 하는 기술 \- React.memo()사용. (ToastUI - React.memo() 현명하게 사용하기)
[TIL] useCallback
버튼을 눌렀을 때 onClick 이벤트에 nextHandler라는 함수가 실행 되도록 했다. 그리고 위의 방법 처럼 nextHandler 함수에 props.history를 이용해 Input 태그에서 입력 받은 값을 state로 넘겨줄 수 있다.

React hook 2
useReducer 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환하는 함수이며 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 한다. useCallback 함수를 기억해서 다시 렌더링될 때 해당 함수가 생성되

useCallback과 React.Memo을 통한 렌더링 최적화
실제로 사용해 보기 전까지는 이해하기 어려웠던 useCallback과 React.memo에 대해 작성해보려고 한다. 리액트 함수형 컴포넌트로 최적화를 위해 (shouldComponentUpdate와 같은)라이프 사이클 메소드를 구현하려 검색하다가 알게 되었던 것 같다
useCallback Hook
useCallback Hook? 이전에 만들었던 이벤트 핸들러 함수를 재사용하는 것 useMemo와 비슷하지만, 함수를 위한 Hook Component들이 props가 바뀌지 않았다면, 아예 리렌더링 시에 기존의 Component를 재사용하게 만들 수 있는데 이를 위해서는 안의 내용물들이 새로 만들어지지 않아야 함 useCallback은 함수를 재사용하도...