[JS] 클로저(Closures)와 리액트의 훅(useState)의 관계

 

클로저는 자바스크립트에서 중요한 개념으로 외부에서 접근할 수 없는 비공개 변수를 생성해 데이터 은닉을 가능하게 합니다. 또한, 비동기 작업이나 이벤트 핸들러에서 상태를 효과적으로 유지하며 활용할 수 있어 유용합니다.

 

이 글에서는 클로저의 장점 그리고 이를 활용해 코드의 재사용성을 높이는 방법과 추가로, React의 상태관리 useState와 클로저의 관계에 대해서도 정리하였습니다.

 

📂 목차

 

---

1. 클로저란 무엇일까❓

클로저는 내부 함수가 외부 함수의 변수(렉시컬 환경)에 접근할 수 있는 기능을 제공합니다. 

이로 인해 함수가 호출된 이후에도 외부 함수의 상태(변수)를 유지할 수 있습니다.

• 클로저는 외부 변수 값 상태를 함수 호출 이후에도 유지합니다.
• 이 상태는 외부에서 직접 접근할 수 없고, 내부 함수로만 접근이 가능합니다.

 

2. 클로저 예제 코드

아래는 클로저의 기본 동작을 설명하는 예제 코드입니다. 함수가 중첩되어 있을 때, 내부 함수가 외부 함수의 변수에 접근하는 예를 보여줍니다.

function outerFunction(){
  let outerVariable = "나는 외부 변수!";

  function innerFunction(){
    console.log(outerVariable); // 외부 함수의 변수에 접근
  }

  return innerFunction;
}

const closureFunction = outerFunction();

closureFunction(); // "나는 외부 변수!" 출력

 

• innerFunction은 outerFunction() 내부에서 선언되었으며, outerFunction()의 스코프에 접근할 수 있습니다. 
• outerFunction()이 실행된 이후에도, innerFunction()은 외부 변수(outerFunction)에 접근할 수 있습니다. 이를 클로저(Closure) 라고 합니다.

 

3. 클로저는 어디에 활용할 수 있을까?

클로저는 주로 내부 정보를 은닉하거나, 상태를 유지하는 데 사용됩니다. 아래는 몇 가지 활용 예제 코드 입니다.

 

 

1️⃣ 데이터 은닉 및 캡슐화

클로저를 사용하면 외부에서 접근할 수 없는 비공개 변수를 만들고, 공개 함수(public function)를 통해 변수 값을 제어할 수 있습니다.

function createCounter() {
  let count = 0; // 비공개 변수

  return {
    increment: function () {
      count++;
      console.log(`현재 카운트: ${count}`);
    },
    decrement: function () {
      count--;
      console.log(`현재 카운트: ${count}`);
    },
    getCount: function () {
      return count;
    },
  };
}

const counter = createCounter();
counter.increment(); // 현재 카운트: 1
counter.increment(); // 현재 카운트: 2
console.log(counter.getCount()); // 2
counter.decrement(); // 현재 카운트: 1

 

• count는 외부에서 직접 접근할 수 없습니다.
• increment, decrement, getCount 함수만 통해 count 값을 조작할 수 있습니다.

 

 

 

2️⃣ 상태 유지

클로저는 이벤트 핸들러나 비동기 작업에서도 상태를 유지하는 데 유용합니다.

function createBtnHandler(btnId) {
  let clickCount = 0;

  return function () {
    clickCount++;
    console.log(`${btnId} 클릭 수: ${clickCount}`);
  };
}

const btn1Handler = createBtnHandler('btn1');
const btn2Handler = createBtnHandler('btn2');

btn1Handler(); // btn1 클릭 수: 1
btn1Handler(); // btn1 클릭 수: 2
btn2Handler(); // btn2 클릭 수: 1

 

• 각각의 버튼 핸들러는 독립적인 상태(clickCount)를 유지합니다.
• 클로저 덕분에 clickCount 변수는 함수 호출 시마다 이전 값을 기억합니다.

 

 

 

3️⃣ once 함수 구현

클로저를 사용하여 함수가 한 번만 실행되도록 제한할 수 있습니다.

 

function once(fn) {
  let executed = false;

  return function (...args) {
    if (!executed) {
      executed = true;
      return fn(...args);
    } else {
      console.log('이미 실행된 함수입니다.');
    }
  };
}

const initialize = once(() => console.log('초기화 완료!'));

initialize(); // 초기화 완료!
initialize(); // 이미 실행된 함수입니다.

• executed는 내부에서만 관리되는 변수로, 함수가 한 번만 실행되도록 제어합니다.

 

4. React에서 클로저와 useState의 관계 ⭐

React의 useState는 클로저의 특성을 활용하여 상태를 유지 합니다.

 

1. useState는 클로저를 기반으로 상태와 렌더링을 관리합니다.
   • 내부 함수가 렌더링 시점의 상태 값을 캡처하는 방식으로 동작합니다.
2. 리액트의 상태관리에서 클로저가 중요한이유:
   • 컴포넌트가 상태를 유지하고, 렌더링 간의 데이터 불일치를 방지할 수 있습니다.
3. 최신 상태 기반 업데이트:
   • 클로저로 인한 값 불일치 문제를 해결하려면, setState의 함수형 업데이트 방식을 사용하는 것이 중요합니다.

 

 

1️⃣ 렌더링과 클로저의 관계

리액트 컴포넌트가 렌더링될 때마다 새로운 랜더링 스코프가 생성됩니다. 이때, useState가 반환한 count 변수는 특정 렌더링 시점의 값을 클로저로 캡처합니다. 아래 예제 코드입니다.

const { useState } = require('react');

export default function CounterRender() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1); // 클로저로 캡처된 count 값 사용
    console.log('클로저에서 캡처된 값:', count);
  }

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase +</button>
    </>
  );
}

 

1. 클로저 동작: handleClick 함수는 렌더링 시점의 count 값을 클로저로 캡처합니다. 따라서 setCount를 호출해 상태를 업데이트해도, 캡처된 값은 변경되지 않습니다.
2. 상태 업데이트: setCount가 호출되면, 리액트는 컴포넌트를 다시 렌더링하고 새로운 렌더링 스코프를 생성합니다. 이로 인해 count는 업데이트 된 최신 값을 참조하게 됩니다.

 

2️⃣ 최신 상태 값 사용

 

useState의 상태를 업데이트할 때 최신 상태를 기반으로 작업하려면, 업데이트 함수 형태의 setCount를 사용하는 것이 좋습니다.

const { useState } = require('react');

export default function CounterRender() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount((prevCount) => prevCount + 1); // 최신 상태 값을 기반으로
    console.log('최신 값 기반:', count); // 여전히 이전 값
  }

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increase +</button>
    </>
  );
}

 

• setCount((prevCount) => prevCount +1) 는 이전 상태를 클로저로 캡처하고, 이를 최신 값으로 활용합니다.
• 이 방식은 비동기 상태 업데이트 및 렌더링 간의 불일치 문제를 해결합니다.

 

3️⃣ 클로저와 useState 공통점과 차이점

 

구분	JavaScript 클로저	React useState
상태 유지 방식	함수의 렉시컬 환경을 통해 변수 상태를 유지	리액트 내부에서 상태를 관리하고 컴포넌트 렌더링 시 최신 값 제공
업데이트 방식	외부에서 내부 함수 호출을 통해 직접 상태를 조작	setState 함수를 사용하여 상태를 업데이트
적용 범위	모든 자바스크립트 코드에서 사용 가능	리액트 컴포넌트 내에서만 사용 가능
캡처된 값	함수 선언 시의 렉시컬 환경을 기억	렌더링 시점의 상태 값을 클로저로 캡처

 

 

 클로저는 함수의 실행 컨텍스트가 종료된 이후에도 상위 스코프의 변수에 접근할 수 있게 해줍니다. 이를 통해 데이터 은닉, 상태 유지, 코드 재사용 등의 다양한 장점을 제공하며, 효율적인 개발이 가능합니다.

특히, 리액트의 useState와 같은 상태관리와 이벤트 핸들링 같은 핵심 개념을 이해하는데 중요한 역할을 합니다. 클로저를 잘 활용하면 안정적이고 유지보수하기 쉬운 코드를 작성할 수 있습니다.