클로저

📌 캡슐화에 대해서 설명하고 이것이 왜 필요한 지 말씀해주세요.

• 객체의 상태를 나타내는 프로퍼티와, 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것.
• 정보 은닉을 위해 사용한다.

📌 클로저의 예시를 들고 과정을 설명하세요

const x = 1;
function outer() {
	const x = 10;
    const inner = function() {
    	console.log(x);
    };
    return inner;
}
const ella = outer();
ella(); // 10

• 클로저는 함수가 자신이 선언된 스코프 밖에서 사용될 때 해당 스코프를 "기억"하는 메커니즘입니다.
• inner 함수는 outer 함수 내에서 정의되었지만 외부에서 호출될 때 outer 함수의 스코프를 기억하고 있습니다.
• 따라서 inner 함수는 outer 함수의 스코프에 있는 변수 x를 참조할 수 있으며, 그 값은 10입니다.
• 따라서 ella();를 호출하면 10이 출력됩니다.

📌 클로저란 무엇인가요?

• 클로저는 함수가 자신이 선언된 스코프 밖에서 사용될 때 해당 스코프를 "기억"하는 메커니즘입니다.

📌 클로저가 유용하게 사용되는 상황에 대해 설명해주세요.

• 상태(state)를 안전하게 변경하고 유지하기 위해 사용한다.
• 다시 말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉(information hiding)하고
• 특정 함수에게만 상태 변경을 허용하기 위해 사용

📌 React hook에서 클로저가 어떻게 쓰이는지 설명해 주세요.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleCount = () => {
    setCount(count + 1); // 클로저: count 변수를 캡쳐하여 사용
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleCount}></button>
    </div>
  );
}

• const [count, setCount] = useState(0); 코드에서 useState hook를 사용하여 count 상태 변수와 그 상태를 변경할 수 있는 setCount 함수를 선언합니다. count 변수는 함수 컴포넌트 Counter 내에서 유지됩니다.

• const handleCount = () => { ... } 코드에서 handleCount 함수를 선언합니다. 이 함수는 버튼 클릭 시 실행되는 이벤트 핸들러로, setCount(count + 1)를 호출하여 count 변수의 값을 1 증가시키는 역할을 합니다. 이때, count 변수는 함수 내에서 정의되지 않았지만 클로저를 통해 함수 내에서 사용할 수 있습니다. 클로저는 handleCount 함수가 생성될 때 count 변수를 캡처하고, 나중에 해당 변수에 접근할 수 있도록 합니다.

• 버튼 클릭 시 handleCount 함수가 실행되고, 클로저를 통해 현재 count의 값에 1을 더해 setCount를 호출합니다. 이로써 count 상태가 증가하고, 화면에 표시된 내용이 업데이트됩니다.

• 클로저를 사용하면 함수가 호출될 때마다 새로운 스코프를 생성하는 대신 이전 스코프의 변수를 유지할 수 있으므로, 상태를 올바르게 업데이트할 수 있게 됩니다.