[React]useMemo

useMemo란

공식문서

//기본 문법
const cachedValue = useMemo(calculateValue, dependencies)

calculateValue:function = cachedValue에 값을 리턴할 적절한 함수
dependencies:array = useMemo가 작동하기에 "의존하는 값"들을 담는 배열

활용 예제

참고자료(youtube)

• inCorrectVersion
  같은 state(items, filterdItems) 두가지를 중복적으로 사용하여 낭비를 하고있다.

function App() {
  const [items, setItems] = useState([])
  const [filteredItems, setFilteredItems] = useState([])
  const inputRef = useRef()


  function onSubmit(e) {
    e.preventDefault()

    const value = inputRef.current.value
    if (value === "") return
    setItems(prev => {
      return [...prev, value]
    })
    setFilteredItems(prev => {
      return [...prev, value]
    })
    inputRef.current.value = ""
  }
  function onChange(e){
  	const value = inputRef.current.value
    setFilteredItems(
      items.filter(
        item => item.toLowerCase().includes(value.toLowerCase())
    )

  }

  return (
    <>
      Search:
      <input
        onChange={onChange}
        type="search"
      />
      <br />
      <br />
      <form onSubmit={onSubmit}>
        New Item: <input ref={inputRef} type="text" />
        <button type="submit">Add</button>
      </form>
      <h3>Items:</h3>
      {filteredItems.map(item => (
        <div>{item}</div>
      ))}
    </>
  )
}

• correctVersion
  "array" state로 관리하고있던 filterdItems를 useMemo로 효율적으로 관리한다.

  또한 query라는 "string" state로 input값에 사용하고있다.

function App() {
  const [items, setItems] = useState([])
  const [query, setQuery] = useState("")
  const inputRef = useRef()

  const filteredItems = useMemo(() => {
    return items.filter(item => {
      return item.toLowerCase().includes(query.toLowerCase())
    })
  }, [items, query])

  function onSubmit(e) {
    e.preventDefault()

    const value = inputRef.current.value
    if (value === "") return
    setItems(prev => {
      return [...prev, value]
    })

    inputRef.current.value = ""
  }

  return (
    <>
      Search:
      <input
        value={query}
        onChange={e => setQuery(e.target.value)}
        type="search"
      />
      <br />
      <br />
      <form onSubmit={onSubmit}>
        New Item: <input ref={inputRef} type="text" />
        <button type="submit">Add</button>
      </form>
      <h3>Items:</h3>
      {filteredItems.map(item => (
        <div>{item}</div>
      ))}
    </>
  )
}