2024-11-13(useRef,formData,memo,useMemo,useCallback)

제어컴포넌트 패턴 : input에서 쓰임

 

useRef

• 비제어 컴포넌트 패턴
• 렌더링x
• input.current.value = input 내용
• input하나하나 제어하는게 장점(성능적)

 

formData

• 비제어 컴포넌트 패턴
• input의 name이랑 연결
• reset : 초기화
• input이 여러개일때 코드가 직관적인게 장점

*trim(): 앞뒤 공백 없애기

 

memoization

• 불필요한 리렌더링을 막기
• 함수의 결과를 캐싱하여 동일한 입력에 대해 다시 계산하지 않도록 하는 최적화 기법

 

*캐싱 : 자주 사용하는 데이터를 임시로 저장해 두고, 필요할 때 빠르게 접근

캐싱⊃memoization(함수레벨)

 

memo

• 함수 컴포넌트를 캐싱
• 필요한 경우에만!(메로리를 차지하기 때문)

 

useMemo

• 계산결과값(계산비용이 많이드는)을 캐싱
• 주로 객체나 배열

 

*리렌더링조건 : state, props, 부모컴포넌트

*useEffect : return()끝나고 실행

 

useCallback

• 함수를 캐싱 (함수도 값인데 useMemo보다 가독성 good)