[To Do List-오류 해결] 웹에서는 됐는데? 1(feat.beforeunload)

🔗 GitHub https://github.com/qwerty00ui88/To-Do-List
🔗 배포 링크 https://qwerty00ui88.github.io/To-Do-List/

🌈 Intro

To Do List 데이터 저장소를 JSON server에서 localStorage로 옮기기로 했다. To do를 추가할 때마다 localStorage.setItem(), localStorage.getItem()을 반복하지 않았으면 했다. 이유는

• drag & drop 시 렌더링 속도가 느려 어색함(가장 큰 이유)
• 비효율적이야 이건 아닌 것 같아...

그러면 beforeunload로 브라우저 종료할 때만 저장해야지

function Main() {
	const [list, setList] = useState([]);
	// ...생략...
  
  	// 1️⃣ 초기 렌더링 시 localStorage에 todoList가 있으면 가져오고 없으면 빈 배열을 list에 할당
	useEffect(() => {
      handleSetList(JSON.parse(localStorage.getItem('todoList')) || []);
    }, []);
  	
  	// 2️⃣ 브라우저 종료 시 localStorage에 변경된 list를 저장
  	window.addEventListener('beforeunload', () => {
      	localStorage.setItem('todoList', JSON.stringify(list));
  	});
  
	return (
  	// ...생략...
  	)
}

어 왜 모바일에서는 안 되지

모바일에서 실행해 보니 localStorage에 데이터가 저장되지 않았다.

MDN을 읽어보았다.

특히 모바일에서는 beforeunload 이벤트가 안정적으로 실행되지 않습니다.
-MDN(https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes)

그러면 beforeunload 대신 뭐 쓰지?

구글링해 보니 웹과 모바일에서 모두 사용 가능한 visibilitychange라는 이벤트가 있었다. 이벤트를 변경하고 그에 맞게 코드도 살짝 변경했다.

이는 사용자가 새 페이지로 이동하거나, 탭을 전환하거나, 탭을 닫거나, 브라우저를 최소화 혹은 종료하거나, 모바일 운영 체제에서 앱을 전환할 때 발생할 수 있습니다.
-Chrome Developers(https://developer.chrome.com/blog/page-lifecycle-api/#events)

function Main() {
	const [list, setList] = useState([]);
	// ...생략...
	useEffect(() => {
      handleSetList(JSON.parse(localStorage.getItem('todoList')) || []);
    }, []);
  	
  	window.addEventListener('visibilitychange', () => { //✅ event 변경
    	if (document.visibilityState === 'hidden') {//✅ 조건문 추가
      		localStorage.setItem('todoList', JSON.stringify(list));
    	}
  	});
  
	return (
  	// ...생략...
  	)
}

해결!