[JavaScript] "라이트 모드-다크 모드" 전환 기능 구현 중 만난 문제, 'false'는 과연 false일까?

1. 반만 작동하는 "라이트 모드-다크 모드' 전환 기능!?

Vue.js 프로젝트에 "라이트 모드-다크 모드" 전환 기능을 구현하고 있었다. 로컬 스토리지에 사용자가 설정한 값을 기억하도록 했고 애플리케이션이 실행되면 로컬 스토리지에 저장된 값을 불러와 그에 맞는 화면을 보여주고자 했다. 그래서 로컬스토리의 값이 false이면 "라이트 모드"를 렌더링 하고, true이면 "다크 모드"를 렌더링 하도록 구현하였다. 그런데 라이트 모드(false)에서 다크 모드(true)로의 전환은 잘 작동하였으나 그 반대는 원하는 대로 작동하지 않았다. 콘솔 로그를 찍어 확인했는데 값은 'false'로 잘 변경되어 있었다. 그런데 왜왜왜?

 

2. 'false'는 과연 false일까?

라이트 모드는 로컬 스토리지의 불리언 값이 false인 경우 작동하도록 코드를 작성했었다. 로컬 스토리지로 부터 값을 가져올 때 localStorage.getItem()을 통해서 가져오는데 그렇게 가져오는 값은 "문자열"이다. 따라서 불리언 값이 아닌 'false'라는 문자열을 가져오게 된것이고 불리언으로 해석될 때 true가 되는 것이다. 이로 인해서 true인 경우에 작동하는 다크 모드만 주야장천 렌더링되었던 것이다.

 

3. JSON.parse()로 해결!

로컬 스토리지의 값을 JSON.parse()를 이용해 가져와 이 문제를 해결할 수 있었다. 이때 가져온 값은 더 이상 문자열 'false'가 아니라 불리언 값 false이다.

JSON.parse(localStorage.getItem('darkMode')) // 로컬 스트리지의 키 'darkMode'의 값을 자바스크립트 값으로 가져옴

 

[그림 1] 상 - 라이트 모드, 하 - 다크 모드