# useCallback

198개의 포스트
post-thumbnail

React - useCallback

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

3일 전
·
0개의 댓글
·
post-thumbnail

지도 영역좌표 디바운스주기

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

4일 전
·
0개의 댓글
·
post-thumbnail

성능최적화

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

2023년 3월 13일
·
0개의 댓글
·

#12. React.memo 최적화의 끝판왕으로 거듭나겠다 !

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

2023년 3월 13일
·
0개의 댓글
·

#11. useCallback 또, 최적화를 꿈꾼다!

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

2023년 3월 13일
·
0개의 댓글
·
post-thumbnail

react.js 사용하기 Ⅱ

react.js 사용하기 Ⅱ

2023년 3월 7일
·
0개의 댓글
·

/**unfinished*/ useCallback 콜백함수

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

2023년 3월 6일
·
0개의 댓글
·

[Today I Learned]useCallback 사용법

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

2023년 3월 3일
·
0개의 댓글
·

useCallback

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

2023년 3월 2일
·
0개의 댓글
·
post-thumbnail

React 4회차

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

2023년 2월 18일
·
0개의 댓글
·

React | useMemo(), useCallback(), + React.memo()

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

2023년 2월 15일
·
0개의 댓글
·
post-thumbnail

메모이징은 캐싱인가?

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

2023년 2월 12일
·
0개의 댓글
·
post-thumbnail

한 주의 정리 - WIL

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

2023년 2월 12일
·
0개의 댓글
·

컴포넌트 최적화(2) - useCallback()

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

2023년 2월 12일
·
0개의 댓글
·
post-thumbnail

리액트 Hook - useCallback

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

2023년 2월 11일
·
0개의 댓글
·

[REACT] useCallback, useMemo

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

2023년 2월 7일
·
0개의 댓글
·

2/7 TIL

useMemo, useCallback

2023년 2월 7일
·
0개의 댓글
·

React | React.Memo, useMemo, useCallback

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

2023년 2월 3일
·
0개의 댓글
·
post-thumbnail

useMemo와 useCallback는 왜, 언제 사용할까?

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

2023년 2월 2일
·
0개의 댓글
·