# useCallback

goodjam92

리액트를 사용하면서 useState, useEffect, useRef등은 써보았지만 아직 제대로 사용해보지 못한 훅들이 많았다...그래서 이 참에 한 번 궁금했던 리액트의 hook몇 가지에 대해 알아보고자 한다.그 첫번째는 바로 useCallback이 되시겠다!컴포넌가

eggmun

오늘은 지도 최적화를 위해 지도에 디바운스를 주려고 한다.

hyuntae_

리액트를 사용하면서 성능최적화에 대해 궁금해졌고 이를 위해 어떠한 Hook이 있는지 찾아봤다. 대표적으로 useMemo와 useCallback Hook이 존재했고 이에 대해 학습한 내용을 정리해본다.첫줄은 이렇게 말하고싶었다. useMemo, useCallback을 사

gazero_

React.memo는 React에서 제공하는 고차컴포넌트로보통 컴포넌트를 인자로 받아서, 고차컴포넌트(React.memo)의 prop check(prop이 변화했는지)를 통해 최적화된 컴포넌트를 반환하게 함일반적인 props 전달 과정을 확인하자 !기존값을 memoiz

gazero_

값 대신에 함수 자체를 캐싱 (컴포넌트 렌더링 성능 최적화 → useCallback으로 컴포넌트 props가 변하지 않으면 렌더가 발생하지 않음)🔔 함수(콜백함수)를 배열형태의 함수 실행 조건값(deps)이 변경될 때까지 저장하고, 재사용(deps 값이 바뀌지 않는

cloudcoke

Hook

bzeromo

react.js 사용하기 Ⅱ

heejeen-choi

React의 컴포넌트 안에 로컬함수를 정의하면 컴포넌트가 다시 렌더링 될 때마다 함수가 새로 만들어진다자세히 말하면, 함수가 새로운 메모리 주소에 다시 만들어지는 것이다useCallback을 사용하면 특정 조건을 만족할 때만 함수를 새로 만들 수 있다.React 공식문

suwoncityboy

첫번째 인자는 메모이제이션 할 콜백함수, 두번째 인자는 의존성 배열을 받음 원하는 요소의 리랜더링을 방지할 수 있다 메모화된 콜백에서 상태 업데이트 Effect가 너무 자주 발생하지 않도록 방지 custom hook 최적화

longcoat

useMemo 기반으로 만들어졌기 때문에 비슷하지만 useMemo -> 특정 결과값을 재사용 할 때 씀 useCallback -> 특정 함수를 재사용 할 때 씀

bada308

Prop Drilling은 React에서 props를 이용해 컴포넌트 간 데이터를 전달할 때 해당 데이터가 필요없는 컴포넌트도 거지는 것이다.위 그림처럼 컴포넌트 A의 데이터를 컴포넌트 C로 전달하기 위해 사이에 있는 컴포넌트 B를 거쳐야한다.문제점prop 전달이 깊어

ohjoo1130

useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 react hooks 중 하나!useMemo에서 Memo는 Memoization을 뜻한다.\* memoization ? 메모이제이션 ? : 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값

pengoose_dev

메모이징은 캐시 메모리를 사용하지 않는다.

h6325g

이번주(2월 6일 ~ 2월 12일) 리액트 입문부터 리액트 숙련과정까지 리액트에 대해 깊이 배우는 시간이었다.리액트의 리렌더링 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두1

jae_han_e

컴포넌트가 렌더링 될 때 내부에 있는 함수들도 다시 만들어지게 된다. 똑같은 함수를 렌더링 될 때 마다 새로 만드는 것은 좋은 현상은 아니며 해당 함수를 자식 컴포넌트에게 props로 전달할 경우, 새로운 props로 인식하고 리렌더링이 발생한다. 오늘은 useCall

h6325g

2월 11일 여정 34일차이다.useCallback은 인자로 들어오는 함수를 기억한다.오늘은 useCallback이라는 Hook에 대해 알아보려고 한다.useCallBack이란 무엇인가?인자로 들어오는 함수 자체를 기억하는 hook이다.가령 예를 들어서 어떤 React

kkookk55

useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다.예를 들어, 어떤 React 컴포넌트

alsgood4007

useMemo, useCallback

duroomi

지금까지 리액트를 사용하면서 '최적화'에 대한 생각은 그렇게 많이 하지 못했다. 사용해 본 React hook은 useState, useEffect, useRef 정도? 솔직히 지금까지 useMemo나 useCallback은 이름만 알고 있었지 무슨 기능을 하는지,

khy226

메모이제이션을 담당하는 useMemo와 useCallback 이라는 두 가지 리액트 훅을 살펴보고 각각의 장점과 단점이 뭐가 있는지 알아보자.