클로저
클로저는 상태를 안전하게 변경하고 유지하기 위해 사용합니다.
다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다.
컴포넌트는 클로저를 활용하는가?
리액트의 컴포넌트는 내부적으로 클로저를 사용합니다.
이는 위에서 언급했듯이 상태를 안전하게 변경하고 유지하기 위해서입니다.
함수형 컴포넌트에서는 자바스크립트의 클로저 개념을 이용하여 상태(state)를 유지합니다.
함수형 컴포넌트는 단순히 함수로 이루어져 있으며, 입력값(props)에 대한 출력값을 반환하는 형태입니다.
이때 함수 내부에서 선언된 변수나 함수는 해당 컴포넌트의 인스턴스 내부에 클로저로서 유지되어, 컴포넌트가 다시 렌더링될 때 그 값을 유지합니다.
예를 들어, 다음과 같이 함수형 컴포넌트를 작성할 수 있습니다.
function MyComponent(props) {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
위 코드에서 useState 훅은 컴포넌트 내부에 상태를 유지하기 위해 클로저를 사용합니다.
useState 훅은 상태 값을 저장하기 위한 변수와, 상태 값을 갱신하기 위한 함수를 반환합니다.
이때 상태 값은 count 변수에 저장되고, setCount 함수를 호출하여 갱신됩니다.
handleClick 함수는 setCount 함수를 호출하여 count 값을 증가시키는 역할을 합니다.
이렇게 클로저를 사용하여 상태를 유지함으로써, 컴포넌트가 다시 렌더링될 때마다 상태 값을 유지할 수 있습니다.
그러면 useState는 클로저를 어떻게 구현하고 있을까?
useState는 내부적으로 클로저를 활용하여 상태 값을 유지합니다.
예를 들어, 다음과 같은 컴포넌트가 있다고 가정해 봅시다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
}
return (
<div>
<p>You clicked {count} times</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
위 코드에서 useState 훅은 컴포넌트 내부에 상태를 유지하기 위해 클로저를 사용합니다. useState 훅은 상태 값을 저장하기 위한 변수와, 상태 값을 갱신하기 위한 함수를 반환합니다.
이때 상태 값은 count 변수에 저장되고, setCount 함수를 호출하여 갱신됩니다. handleClick 함수는 setCount 함수를 호출하여 count 값을 증가시키는 역할을 합니다.
이렇게 클로저를 사용하여 상태를 유지함으로써, 컴포넌트가 다시 렌더링될 때마다 상태 값을 유지할 수 있습니다.
useState는 클로저를 활용하여 다음과 같이 내부적으로 상태 값을 저장하고 반환합니다.
function useState(initialValue) {
let state = initialValue; // 상태 값을 저장하기 위한 변수
function setState(newValue) {
state = newValue; // 상태 값을 갱신하기 위한 함수
}
function getState(){
return state;
}
return [getState(), setState]; // 상태 값과 갱신 함수를 반환
}
위 코드에서 useState 함수는 state 변수와 setState 함수를 선언합니다. state 변수는 외부에서 받은 값인 초기값 initialValue로 초기화됩니다.
setState 함수는 newValue를 인자로 받아서 state 변수를 갱신합니다.
이 때 initialValue 값을 기억하기 위해 함수 내부에서 state라는 값에 저장해줬으므로 값은 유지가 될 수 있습니다.
때문에 state는 useState라는 함수내에서만 사용될 수 있도록 은닉된 변수입니다.
이러한 이유는 state를 임의적으로 값을 할당하여 변경할 수 없는 것입니다.
state는 오직 setState로만 값을 변경시킬 수 있습니다.
마지막으로 useState 함수는 상태 값을 저장한 state 변수와, 상태 값을 갱신할 수 있는 setState 함수를 배열로 묶어서 반환합니다.
이렇게 useState 함수는 클로저를 사용하여 상태 값을 유지합니다.
