📆 날짜

2023/12/18(월)

📚 챕터

클로저는 어떻게 활용하는가

---

👨🏻‍💻학습 내용

🎯클로저는 어떻게 활용할까?

전역 스코프는 어디서든 원하는 값을 꺼내올 수 있다는 장점이있다.
하지만 누구든 접근할 수 있고 수정할 수 있다는 단점이 있다.

<script>
var counter = 0

function handleClick(){
counter++
}
</script>

위 예제코드를 살펴보면 counter 변수는 큰 문제를 가지고 있다.
문제는 전역 레벨에 선언돼 있어서 누구나 수정할 수 있다는 것이다.

• window.counter를 활용하면 쉽게 해당 변수에 접근 할 수 있을 것이다.
  만약 리액트의 useState의 변수가 전역 레벨에 저장돼 있으면 어떻게 될까?
  자바스크립트를 조금만 아는 사람이라면 누구나 리액트 애플리케이션을 쉽게 망가뜨릴 것이다.따라서 리액트가 관리하는 내부 상태 값은 리액트가 별도로 관리하는 클로저 내부에서만 접근할 수 있다.
  JS에서 클로저 활용을 어떻게 하는지 예제코드로 살펴보자

📌 JS에서의 클로저 활용법

<script>
function Counter() {
	var counter = 0
    
    return{
    	increase: function() {
        	return ++counter
        },
        decrease : function () {
        return --counter
        },
        counter: function() {
        console.log('counter에 접근함')
        return counter
        },
    }
}

var c = Counter()

console.log(c.increase()) // 1
console.log(c.increase()) // 2
console.log(c.increase()) // 3
console.log(c.decrease()) // 2
console.log(c.counter()) // 2
</script>

위의 예제코드와 같이 코드를 변경했을 때 얻을 수 있는 이점에는 여러 가지가 있다..
먼저 counter 변수를 직접적으로 노출하지 않음으로써 사용자가 직접 수정하는 것을 막았음은 물론,접근하는 경우를 제한해 로그를 남기는 등의
부차적인 작업도 수행할 수 있게 됐다.
또한 counter 변수의 업데이트를 increase와 decrease로 제한해 무분별하게 변경되는 것을 막았다. 이처럼 클로저를 활용하면 전역 스코프의 사용을 막고, 개발자가 원하는 정보만 개발자가 원하는 방향으로 노출시킬 수 있다는 장점이 있다.
그렇다면 리액트 함수형 컴포넌트 훅에서 클로저는 어떻게 사용되는지 살펴보자.

📌 React에서의 클로저 활용법

클로저의 원리를 사용하고 있는 대표적인 것 중 하나가 바로 useState다.

<script>
function Component() {
 const [state,setState] = useState()
 
 function handleClick(){
 	//useState 호출은 위에서 끝났지만,
    // setState는 계속 내부의 최신값(prev)을 알고있다.
    //이는 클로저를 활용했기 때문에 가능하다.
    setState((prev) => prev +1)
 }
 
}
</script>

useState 함수의 호출은 Component 내부 첫 줄에서 종료됐는데, setState는
useState 내부의 최신 값을 어떻게 계속해서 확인할 수 있을까?
바로 클로저가 useState 내부에서 활용됐기 때문이다.
외부 함수(useState)가 반환한 내부 함수(setState)는 외부 함수(useState)의 호출이 끝났음에도 자신이 선언된 외부 함수가 선언된 환경(state가 저장돼 있는 어딘가)을 기억하기 때문에 계속해서 state 값을 사용할 수 있는것이다.

➡️ 다음 글에서는 클로저를 활용할 때 주의할 사항에 대해 살펴보자.