React
[React] 지연 초기화 (컴포넌트 최적화 기능)
눙엉
2022. 8. 7. 22:13
클린 코드 책을 읽다 지연 초기화에 대해 조금 더 알아봤다.
마침 리액트 최적화에 관련된 글을 찾아서 정리해봤다.
아래의 두 코드를 비교해보자
코드 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/