자바스크립트 클로저를 사용해보자.
클로저.. 이론적으로만 알고 있었지 사용을 해본 적은 없어서 클로저 써보고 싶은데..
함수형 프로그래밍을 공부해야하나 🤔
클로저로 뭔가 구현해보고 싶은데 마땅히 떠오르는 게 없어서..! 다크모드를 구현해보기로 했다.
(다크모드 구현해본 적 없음 ㅋㅋ)
* 다크모드와 같은 테마는 저장가능한 형태로 하는 것이 사용자 경험에 좋으므로 실제 다크모드 구현 시에는 스토리지와 같은 상태를 저장할 수 있는 것을 이용하거나, CSS에 사용자 os 테마를 인식하는 속성을 사용하는 방법 등을 사용하는 것이 좋겠다.
클로저를 사용하지 않은 코드
아마 평소의 내가 생각을 하지 않은 채 작성할 법한 코드부터 살펴보자. (ㅋㅋㅋㅋㅋㅋ ㅠㅠㅠ)
전역 변수 하나 선언해놓고 true/false 값에 따라 분기처리하는 단순한 방법이다.
일단 전역 변수를 사용한다는 부분에서 어떠한 사이드 이펙트가 발생할지 모른다는 문제가 있을 것같다.
하지만 제일 떠올리기 쉬운 방법인걸.. 깔깔,,
스타일은 임의로 넣은 것이므로 스크립트 태그 부분만 보도록하자.
가장 큰 문제점이라하면 아무래도 isDarkMode라는 전역 변수일 것이다.
다른데서 이 isDarkMode의 값을 쉽게 변경할 수 있기 때문에 엄청난 사이드 이펙트가..예상된다..! 😮
이제 이 전역변수의 문제점을 클로저를 사용하여 해결해보자.
클로저 사용
클로저를 사용해서 isDarkMode를 은닉화했다.
if-else 문도 리팩토링해보자.
끝끝..! 하려고 했지만..!
현재 이벤트 리스너를 살펴보면 클릭 이벤트가 발생할 때마다 toggleDarkMode 함수를 호출하고 있다.
그러면 클릭 이벤트가 발생할 때마다 toggleDarkMode의 리턴 값인 익명 함수가 새로 생성되는 건가.
어.. 갑자기 헷갈린다.. 헷갈리니까 확실한 방법으로 가야겠다.
IIFE로 변경해주었다.
동작은 동일하다.