주섬주섬 코딩, 소소하지만 꾸준히 쌓아가는 개발 기록...

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn 성능최적화 구글확장플러그인 devtools로 확인하여 테스트한 후에 최적화가 필요하면 진행한다. 최적화작업은 작업의 마지막에 한다. useEffect와 useRef로 재렌더링이 되는 이유를 디버깅할 수 있는 방법이 있다. ref를 만들어서 props나 state들을 넣고 비교하면서 검사하면된다, import React, {useCallback, useEffect, useRef}from 'react'; const Test = () => { const Ref = uesRef([]); useEffect(() =>{ // 콘솔에 찍어보자 co..

강의 유튜브 주소 : https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn useMemo와 useCallback Class에서 작업했던 것들을 Hooks로 옮기다보면 Class에서 문제가 되지 않던 부분들이 문제가 되는 경우가 있다. Hooks는 함수안에 있는 내용이 재 렌더링이 되는데, getNumbers라는 함수가 Hooks의 특성으로 인해서 재 렌더링이될 수 있다. import React, { useState, useRef, useEffect } from 'react'; function getNumbers(){ // ...... } const Test = () => { const numbers =() =..