[JavaScript] 자바스크립트에서 해시(Hash #) 처리하기

098_자바스크립트 해시(Hash #) 처리하기

[적용]

• 딥 링크(Deep Link)를 구현하고 싶을 때
• 해시값에 따라 처리를 구분하고 싶을 때

---

[문법]

속성	의미	반환
location.hash	앵커 달기	문자열

---

[내용]

location.hash 속성으로 앵커(Anchor*) 기능을 사용할 수 있다.

앵커는 페이지 내부의 링크 기능을 하며, 읽기와 쓰기 모두 가능하다.

* 하이퍼링크와 같은 의미

 

[읽기 작업]

const hash = location.hash;
console.log(hash);  // 결과의 예: '#app'

 

[쓰기 작업]

location.hash = 'app';

단일 페이지 애플리케이션에서 페이지의 계층을 나타내기 위해 앵커를 사용하기도 한다.

단일 웹 페이지 내에서 여러 화면으로 표시하고 싶을 때 hash로 기능을 편리하게 구현할 수 있다.

응용 예로 웹 페이지 내에서 앵커를 사용해 스크롤을 조절하는 기능이 가능하다.

앵커 값이 변경되면 대상 id 요소를 확인하고 페이지의 스크롤을 조절하여 원하는 화면을 표시한다.

 

---

 

 

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김