🏨 프로젝트: 숙소 예약 페이지 만들기

---

💾 [ localStorage 데이터 관리 ]

기능	설명
📥 getUserList()	localStorage에 저장된 데이터를 가져오는 함수
💾 setUserList()	데이터를 JSON 형태로 변환하여 localStorage에 저장하는 함수
⚙️ JSON.stringify()	객체 → 문자열 변환
⚙️ JSON.parse()	문자열 → 객체 변환

---

📜 1️⃣ localStorage에서 List 가져오기

function getUserList() {
    let userList = localStorage.getItem('userList');
    if (userList == null) {
        userList = [];
    } else {
        userList = JSON.parse(userList);
    }
    return userList;
}

💡 설명

단계	동작
①	localStorage.getItem('userList')로 데이터 가져오기
②	데이터가 없으면 []로 초기화
③	존재할 경우 JSON.parse()로 문자열 → 배열 변환
④	최종적으로 userList 배열을 반환

---

📜 2️⃣ localStorage에 List 저장하기

function setUserList(userList) {
    localStorage.setItem('userList', JSON.stringify(userList));
}

💡 설명

단계	동작
①	배열을 JSON.stringify()로 문자열 변환
②	localStorage.setItem()으로 key-value 형태 저장
⚠️	localStorage는 문자열만 저장 가능 → 반드시 JSON 변환 필요

---

🎯 [ select 태그의 option 값 제어 ]

📜 HTML 예시

<select class="select">
    <option value="">선택하세요</option>
    <option value="seoul">서울</option>
    <option value="busan">부산</option>
</select>

📘 JavaScript

document.querySelector('.select').value;

💡 설명

항목	내용
✅ . / # 필수	클래스 → . / 아이디 → # 반드시 명시
🎯 .value	현재 선택된 option의 값을 반환

---

⚙️ [ onchange 이벤트 사용하기 ]

📜 HTML 예시

<select onchange="regionChange()">
    <option value="">선택하세요</option>
    <option value="jeju">제주도</option>
    <option value="gangwon">강원도</option>
</select>

📘 JavaScript 예시

function regionChange() {
    const selected = document.querySelector('.select').value;
    console.log("선택된 지역:", selected);
}

💡 설명

항목	내용
🔄 onchange	select 요소의 값이 변경될 때 자동 실행
🧩 활용 예시	지역 선택, 날짜 변경, 인원 필터 등 실시간 반응 구현

---