리액트에서의 클로저
클로저는 자바스크립트에서 기본이 되는 아주 중요한 개념이다.
기술 면접에서 1순위로 자주 물어보는 개념이기 때문에, 나도 기술 면접을 준비하며 외웠던 기억이 난다.
하지만, 실무에서 클로저가 어떻게 쓰이는지 잘 이해하지 못했고, 이를 실제로 어떻게 응용해야 할지 고민하던 시기가 있었다. 이번에 클로저 개념을 더 심도 있게 공부해보려 한다.
문제
customHook
에 함수를 파라미터로 넘겨줄 때, useCustom
컴포넌트가 언마운트되는 상황에서 해당 함수가 실행될 때, 함수 내부의 state
값이 어떻게 출력되는지 살펴보자.
import useCustom from './hooks/useCustom'
import { useState } from 'react'
export default function Home() {
const [state, setState] = useState(0)
useCustom(() => console.log('inner func state:', state))
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<div>{state}</div>
<button onClick={() => setState(state + 1)}>+</button>
</div>
)
}
import React, { useEffect } from 'react'
const useCustom = (func: Function, state: any) => {
console.log('params state:', state)
useEffect(() => {
return () => func()
}, [])
return <div>useCustom</div>
}
export default useCustom
코드 설명
읽는 시간 2분