[React] 지연 초기화 (컴포넌트 최적화 기능)

클린 코드 책을 읽다 지연 초기화에 대해 조금 더 알아봤다.

마침 리액트 최적화에 관련된 글을 찾아서 정리해봤다.

---

아래의 두 코드를 비교해보자

 

코드 1

const Counter = () => {
  const [count, setCount] = useState(
    Number.parseInt(window.localStorage.getItem(cacheKey)),
  )

  useEffect(() => {
    window.localStorage.setItem(cacheKey, count)
  }, [cacheKey, count])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prevCount) => prevCount - 1)}>-</button>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>
    </div>
  )
}

코드 2

const Counter = () => {
  const [count, setCount] = useState(() =>
    Number.parseInt(window.localStorage.getItem(cacheKey)),
  )

  useEffect(() => {
    window.localStorage.setItem(cacheKey, count)
  }, [cacheKey, count])

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prevCount) => prevCount - 1)}>-</button>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>+</button>
    </div>
  )
}

 

자세히 보지 않는다면 두 코드의 차이점이 한 번에 와닿지는 않을 것이다.

 

정답은 useState의 코드에 숨어 있었다.

// 코드 1
const [count, setCount] = useState(
  Number.parseInt(window.localStorage.getItem(cacheKey)),
)

// 코드 2
const [count, setCount] = useState(() =>
  Number.parseInt(window.localStorage.getItem(cacheKey)),
)

초기화를 할 때 코드 1과 2의 차이는 함수를 사용하는 것이다.

둘 다 localStorage를 사용해서 값을 파싱 하는 것이지만 코드 2는 함수를 사용하고 있다.

 

초기 값을 계산하는 비용이 클 때 지연 초기화 방법을 사용하라고 권하고 있다.

지연 초기화는 상태가 생성 될 때 한 번만 실행되기 때문이다.

 

위의 코드 1과 2에서는 count상태가 변경될 때마다 리 렌더링이 동작하는데, 그 리 렌더링이 되는 동안 초기 값은 다시 사용하지 않는다.

 

그렇다면 사용하지 않는 값을 코드 1에서는 리렌더링 될 때마다 localStorage에서 값을 찾고 있을 것이다.

그래서 코드2에서의 지연 초기화 방법을 사용해서 불필요한 계산을 방지할 수 있다.

 

하지만 모든 경우에서 지연 초기화를 사용하는 것은 아니다.

localStorage, map(), filter(), find() 등 비용이 큰 계산에서 사용하는 것이 좋다.

 

마지막에 비용이 큰 계산이라는 기준이 참 애매하긴 한데... 각자의 기준에서 계산이 복잡하다 싶으면 사용하는 것으로...

 

 

 

 

원문 : https://www.benmvp.com/blog/four-characters-optimize-react-component/