profile
개발자로서 한걸음

리액트 훅 useMemo, useCallback

React Memoization 📋 ➡ **메모이제이션(memoization)은 컴퓨터가 동일한 계산을 반복해야 할 때 맨 처음 계산한 값을 메모리에 저장해서 필요 할때마다 메모리에서 해당 값을 꺼내서 사용하는 것을 말한다. ** 왜 사용하는지? 💟 **state와 props를 통해 수많은 랜더링이 일어난다. 랜더링이 일어날 때 무거운 작업을 수행한다.** 남용하면 안되는 이유 🚫 무분별한 사용은 메모리 사용량이 커져 오히려 성는에 더 악화된다. useMemo useMemo는 두개의 인자를 받는데 1번째 인자로는 callback 함수, 2번째 인자로는 배열을 받는다. > 배열 안의 item이 변경 될 때만 콜백함수를 다시 호출한다. useCallback **useCallback은 useMemo와 비슷하지만, useMemo는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback은 함수의

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

useContext

📌context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 사용법 context 등록

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

리액트 useState를 활용한 숫자 카운트하기

리액트를 공부하기 시작하면서 간단한 기능 구현을 해봤다. useState를 사용하여 button을 누르면 숫자가 증가, 감소되는 기능을 구현했다. return에는 button 태그에 onClick 함수를 넣어주면서 숫자가 증가, 감소되게 하고 useState(0)에 0을 넣어 초기값을 넣어줬다. 🔥코드를 살펴보자 > ✔ App 함수 안에 const [count, setCount] = useState(0); 을 설정해줌으로써 0을 초기값으로 하고 setCount를 이용해 count에 변화를 줄 수 있다. ✔ 함수 plus, minus를 보면 setCount를 이용해 count에 + 1을 해준다. ✔ h2 안의 {count}는 초기값 0이다.

2022년 12월 8일
·
0개의 댓글
·