useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.
import React,{useState} from "react";
const getAverage = numbers =>{
console.log('평균값 계산중..')
if (numbers.length===0) return 0
const sum = numbers.reduce((a,b)=>a+b)
return sum/numbers.length
}
const Average= () =>{
const [list,setList] = useState([])
const [number,setNumber] = useState('')
const onChange = e =>{
setNumber(e.target.value)
}
const onInsert = e =>{
const nextList = list.concat(parseInt(number))
setList(nextList)
setNumber('')
}
return (
<div>
<input value={number} onChange={onChange} />
<button onClick={onInsert}>등록</button>
<ul>
{list.map((value,index)=>(
<li key={index}>{value}</li>
))}
</ul>
<div><b>평균값:</b>{getAverage(list)}</div>
</div>
)
}
export default Average
총합구하기: const sum = numbers.reduce((a,b)=>a+b)
반복 component : {list.map((value,index)=>( <li key={index}>{value}</li>))}
getAverage
함수가 인풋 내용 바뀔 때마다 평균값을 계속 다시 계산한다 → 이전 값 저장 필요성
import React,{useState,useMemo} from "react";
const avg = useMemo(()=>getAverage(list),[list])
<div><b>평균값:</b>{avg}</div>
useMemo와 비슷한 함수, 렌더링 재사용 줄이는 목표
import React,{useState,useMemo,useCallback} from "react";
const onChange = useCallback(e=>{
setNumber(e.target.value)
},[])
const onInsert = useCallback(() =>{
const nextList = list.concat(parseInt(number))
setList(nextList)
setNumber('')
},[number,list])
useCallback(()⇒{},[])
== 컴포넌트가 처음 렌더링될 때만 함수 생성
useCallback(()⇒{},[number,list])
== number , list 가 바뀌었을 때만 함수 생성
useCallback
의 첫번째 파라미터는 생성하고 싶은 함수를 넣고
두번째는 배열을 넣는다. → 이 배열에는 어떤 값이 바귀었을 때 함수를 새로 생성해야하는지 명시
함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 한다.
const inputEl = useRef(null)
const onInsert = useCallback(() =>{
const nextList = list.concat(parseInt(number))
setList(nextList)
setNumber('')
inputEl.current.focus()
},[number,list])
<input value={number} onChange={onChange} ref={inputEl} />
useRef를 사용하여 ref를 설정하면 객체 안의 current 값이 실제 엘리먼트를 가리킨다.