React - Hooks (useRef / useMemo) (3)

 
Memoization
                           
- 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 ⇒ 적용하면 중복 연산을 피할 수 있어 메모리 성능 최적화 가능

 

useMemo  ✔
                         
 - 연산 결과 재사용, 함수 연산 최적화 기법

 
memoization 하고 싶은 함수를 감싸줌

const getAnalysis = useMemo(
	() => {
    	const goodCount = data.filter((it) => it.emotion >= 3).length;
        const badCount = data.length - goodCount;
        const goodRatio = (goodCount / data.length) * 100;
        return { goodCount, badCount, goodRatio }
    }, [data.length] // data.length의 값이 변할때만 useMemo의 콜백함수 실행됨!
);

 
첫번째 인자인 콜백 함수가 리턴하는 값 = 연산을 최적화 해줌

함수가 연산을 수행해서 어떤 값을 리턴 하는데, 해당 리턴 값을 최적화 시키고 싶을 때 사용하면 됨

- useMemo 남용하는 경우 발생하는 문제점
① 컴포넌트의 복잡도 상승 ⇒ 코드 가독성&유지 보수성 ↓
② 재활용을 위해서 가비지 컬렉션(garbage collection)에서 제외되기 때문에 메모리를 더 쓰게 됨

- 가비지 컬렉션(garbage collection) : 더이상 사용하지 않는 메모리를 발견하고 이를 해제해주는 역할을 함

 

useRef ✔
                   
- .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환
 
클래스에서 인스턴스 필드를 사용하는 방법과 유사한 어떤 가변값을 유지하는 데에 편리하고, 매번 렌더링을 할 때 동일한 ref 객체를 제공
 
① DOM요소를 선택하는 기능

import { useRef, useState } from "react"

const UseRefEx = () => {
  const [name, setName] = useState("")
  const nameInput = useRef()

  const handleSave = () => {
    if (name.length < 1) {
      nameInput.current.focus() // 값을 입력하지 않았을 때 해당 인풋에 포커스를 넣어줌
      return
    }
  }

  return (
    <div className="UseRefEx">
      이름:{" "}
      <input
        ref={nameInput}
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="이름을 입력하세요"
      />
      <button onClick={handleSave}>확인</button>
    </div>
  )
}

export default UseRefEx

② Component 안에서 조회 및 수정이 가능한 변수를 관리하는 용도로도 사용

 

useRef() 를 사용 할 때 파라미터를 넣어주면, 이 값이 .current 값의 기본값이 되고,

이 값을 수정 할때에는 .current 값을 수정하면 되고 조회 할 때에는 .current 를 조회하면 됨

- 객체를 직접 선언하거나 let을 이용하여 변수 선언하는 방법을 지양하는 이유

 

useRef는 일반적인 자바스크립트 객체로 heap 영역에 저장됨
그래서 어플리케이션이 종료되거나 가비지 컬렉팅 될 때 까지 참조할 때 마다 같은 메모리 주소를 가지게 되고
같은 메모리 주소를 가지기 때문에 === 연산이 항상 true를 반환하고, 값이 바뀌어도 리렌더링 되지 않음

 

하지만 함수 컴포넌트 내부에 변수를 선언한다면, 렌더링 될 때마다 값이 초기화 되므로 해당 방법보다는 useRef를 이용하여 변수를 선언한다면 리렌더링 없이 변수값의 변화를 이용할 수 있음

 

하지만,  useRef 이용해서 변수를 업데이트 하게 되면 해당 Component가 리렌더링 되지 않아 동일한 ref 객체를 제공함
⇒ 리렌더링을 원한다면 callback ref를 사용해야 함