useMemo

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 함수가 인풋 내용 바뀔 때마다 평균값을 계속 다시 계산한다 → 이전 값 저장 필요성

useMemo 사용하기

import React,{useState,useMemo} from "react";
const avg = useMemo(()=>getAverage(list),[list])
<div><b>평균값:</b>{avg}</div>

useCallback

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의 첫번째 파라미터는 생성하고 싶은 함수를 넣고

두번째는 배열을 넣는다. → 이 배열에는 어떤 값이 바귀었을 때 함수를 새로 생성해야하는지 명시

useRef

함수 컴포넌트에서 ref를 쉽게 사용할 수 있도록 한다.

Average에서 등록을 누르면 포커스 넘어가게하기

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 값이 실제 엘리먼트를 가리킨다.