[JS] 실습-DatePicker

📌 Date-picker 구현

• 현재 년도와 달의 이름을 표시한다.
• 버튼을 누르면 이전 달과 다음 달로 이동한다.
• 현재 표시 중인 달에 오늘 날짜가 있으면 구분해 준다.
• 현재 표시 중인 달의 1일 앞과 말일 뒤에 이전 달과 다음 달의 날짜로 채운다.
• 날짜를 클릭하면 해당 날짜를 'yyyy-mm-dd'형식으로 화면에 표시한다.
• 캘린더 이외의 영역을 클릭하면 캘린더가 사라진다.
• Date picker의 값이 존재할 때 Date picker를 다시 클릭하면 기존에 있던 값을 기준으로 캘린더를 렌더링한다.

Date picker를 구현해보던 중에 한 가지 문제점이 생겼다.
calendarNavElement에 appendChild로 왼쪽 화살표 버튼을 넣어주고,
innerHTML을 이용해서 코드를 작성해 주었는데 아래와 같이 왼쪽 화살표가 보이지 않는 것이다.

const leftNavElement = document.createElement("div");
leftNavElement.className = "triangle-left";

leftNavElement.addEventListener('click', function () {
	const calendar = Calendar(new Date(nowDate.setMonth(nowDate.getMonth() - 1)));
	calendar.classList.remove("hidden");
	element.replaceWith(calendar);
});

calendarNavElement.appendChild(leftNavElement);

calendarNavElement.innerHTML=`
  <div class="view-month-year">
    <div class="month">${monthList}</div>
    <div class="year">${nowYear}</div>
  </div>
`;
이하 생략 ...

그래서 나는 innerHTML 대신 insertAdjacentHTML을 사용해 보았다.

❓insertAdjacentHTML이란?

✔️ 먼저, insertAdjacentHTML의 기본 문법이다.

element.insertAdjacentHTML(position, text);

• position은 아래에 있는 단어만 사용 가능하다.

  • 'beforebegin' : element 앞에
  • 'afterbegin' : element 안에 가장 첫번째 child
  • 'beforeend' : element 안에 가장 마지막 child
  • 'afterend' : element 뒤에

• text는 해당 위치에 삽입 될 HTML요소의 text 값을 적어주면 된다.

✔️ insertAdjacentHTML의 메서드를 사용하면 기존의 노드는 건들지 않고 노드를 추가한다.

이것이 innerHTML과의 가장 큰 차이점이다.

innerHTML 속성은 기존의 노드를 삭제 후에 재구성하기 때문에 innerHTML에 값이 할당될 때 마다 DOM Tree는 새로 그려지게 된다.
하지만 insertAdjacentHTML 메서드를 사용하면 이미 사용중인 element는 건드리지 않고 특정 위치에 DOM Tree 안에 원하는 노드를 추가하게 된다.

쉽게 말해서, innerHTML을 사용하면 기존에 있는 것은 덮어쓰기가 되버리는 것이다.
아래에 insertAdjacentHTML 메서드를 사용한 코드와 결과 화면이다.

const leftNavElement = document.createElement("div");
leftNavElement.className = "triangle-left";

leftNavElement.addEventListener('click', function () {
	const calendar = Calendar(new Date(nowDate.setMonth(nowDate.getMonth() - 1)));
	calendar.classList.remove("hidden");
	element.replaceWith(calendar);
});

calendarNavElement.appendChild(leftNavElement);

// innerHTML -> insertAdjacentHTML 변경
calendarNavElement.insertAdjacentHTML('beforeend', `       
  <div class="view-month-year">
    <div class="month">${monthList}</div>
    <div class="year">${nowYear}</div>
  </div>
`);
이하 생략 ...

calendarNavElement에 appendChild로 넣어준 leftNavElement가 삭제되지 않고 정상적으로 보이는 것을 확인할 수 있다.

참고 : https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

Github Repository 이동