React로 보는 클로저
date
Oct 29, 2023
slug
closure
status
Published
tags
React
summary
type
Post
코드 블록이 보이지 않는 경우, 페이지를 새로고침해주세요.
시작하며
클로저는 함수형 프로그래밍 언어에서 중요한 개념 중 하나이며, JavaScript와 같은 언어에서도 사용됩니다.
먼저 클로저에 대해 알아보기 전에 아래 예제들을 통해 알아보겠습니다.
예제 1
문제점:
num의 경우 전역 변수로 함수 외부에서 의도치 않게 수정될 수 있어 버그의 원인이 될 수 있습니다.
예제 2
문제점:
변수를 지역 스코프로 수정하게되면 의도치 않은 수정은 방지할 수 있겠지만, 함수 내의 지역 변수는 매 호출마다 초기화되므로 이전 호출에서의 상태를 유지할 수 없습니다.
예제 3
해결:
클로저를 사용하면 함수가 자신의 외부 함수의 스코프에 있는 변수에 접근할 수 있게 되어, 이 변수를 통해 이전 호출의 상태를 유지할 수 있습니다.
클로저
내부함수는 외부함수의 실행이 끝난 후에도 외부변수에 접근할 수 있습니다. 이는 클로저가 해당 변수를 "기억"하기 때문입니다. 이러한 특성은 데이터를 은닉하고, 특정 함수에게만 상태를 조작할 수 있는 권한을 주는 캡슐화를 구현하는 데 유용하게 사용됩니다.
변수를 기억하고 조작할 수 있는 특성은 "클래스"의 주요 기능 중 하나입니다.
React.useState
이와 유사하게, React의
useState 훅은 상태(변수)를 유지(기억)하고 관리(조작)하는 기능을 제공합니다. 이러한 개념을 바탕으로 클로저를 활용하여 useState 함수를 구현해보겠습니다.예제 1
문제점:
state가 함수로 구현되어 있습니다. state는 함수가 아닌 변수여야 합니다.예제 2
문제점:
의도와 다르게 동작합니다.
useState 호출 시점의 값으로 고정되어 있어 값을 변경할 수 없습니다.예제 3
해결:
state를 useState의 외부 스코프에 선언하고, setState가 실행되면 외부 스코프의 state를 변경합니다.예제 4
문제점:
의도와 다르게 동작합니다. 단일
state 변수를 공유합니다. 따라서 여러 개의 상태를 독립적으로 관리할 수 없습니다.해결:
hooks를 useState의 외부 스코프에 선언하고 외부 스코프의 배열(hooks)에 순서대로 저장합니다.Hook 규칙
최상위(at the Top Level)에서만 Hook을 호출해야 합니다.
반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요. 대신 early return이 실행되기 전에 항상 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다.
오직 React 함수 내에서 Hook을 호출해야 합니다.
Hook을 일반적인 JavaScript 함수에서 호출하지 마세요. 대신 아래와 같이 호출할 수 있습니다.
- React 함수 컴포넌트에서 Hook을 호출하세요.
- Custom Hook에서 Hook을 호출하세요.
따라서 React에서 Hooks는 컴포넌트의 상단에서 호출되어야 하며, 그 순서는 모든 렌더링에서 동일해야 합니다.
idx 변수는 useState의 호출 순서를 추적하는 데 사용됩니다. render 함수가 실행될 때마다 idx는 0으로 재설정됩니다. 이것은 Hooks가 호출될 때마다 그 순서가 일관되게 유지되도록 보장합니다. 결과적으로, 모든 렌더링 주기에서 Hooks는 동일한 순서로 실행됩니다.마지막으로 이러한 개념을 바탕으로
useEffect 함수를 구현해보겠습니다.React.useEffect
useEffect는 현재 의존성 배열과 이전 의존성 배열을 비교합니다. 만약 의존성이 변경되었으면(
hasChanged가 true일때), 함수(cb)를 실행합니다.마치며
클로저를 이해하고 클로저를 사용하여 React의 useState와 useEffect를 구현하면서 훅의 규칙에 대해서 이해할 수 있었습니다. 이 글이 클로저를 이해하는데 도움이 되기를 바랍니다. 앞으로도 유용한 정보를 공유하기 위해 노력하겠습니다.
