林's

[React] 불펌방지 본문

프로그래밍/웹프론트

[React] 불펌방지

수풀림 풀림이 2019. 11. 14. 18:49

context menu

모바일이 있기 전까지만 해도 불법 복제를 방지하기 위해 마우스 우클릭 방지 스크립트를 사용하곤 했습니다.

이를 위해 contextmenu 이벤트에 preventDefault() 메서드를 사용하곤 했죠. 

그러나 모바일이 등장한 이후로는, 카카오톡의 인앱 브라우저나 아이폰의 경우, 이 이벤트가 동작하지 않는 걸 알 수 있습니다.

그 이유는 바로, 아이폰의 경우, 길게 터치를 했을 경우, context menu 가 아닌 아이폰 만의 메뉴창이 뜨기 때문입니다.

 

이제 이 두 상황에 대응하기 위한 코드를 봐보겠습니다. 

1. 안드로이드와 PC 에서

onContextMenu = e => {
  	e.preventDefault();
};

componentDidMount() {
	window.addEventListener('contextmenu', this.onContextMenu);
}

componentWillUnmount() {
    window.removeEventListener('contextmenu', this.onContextMenu);
}

1). onContextMenu 는 안드로이드나 피시에서 나타나는 메뉴창이 뜨는 이벤트를 끄는 콜백함수입니다.

2). componentDidMount() 는 리액트의 생명주기 함수로, 가상돔에 컴포넌트가 장착 되었을 때, 호출되는 함수입니다. 메뉴가 뜰 때, 1) 의 콜백함수를 등록해줍니다.

3). componentWillUnmount() 는 리액트의 생명주기 함수로, 컴포넌트가 화면에 더이상 나타나지 않아 사라지기 직전에 호출되는 함수입니다. 이 때, 이벤트 리스너를 제거해주지 않으면, 컴포넌트가 로드될 때마다 이벤트 리스너가 쌓이게 됩니다.

 

2. ios

.hide_context_menu {
  -webkit-touch-callout: none;
}

ios는 간단합니다. 위의 css를 추가하여 아래처럼 컴포넌트의 class 속성에 추가해주시면 됩니다.

<img className="hide_context_menu"/> 

 

모쪼록 도움이 되시길!! 전 이거 찾느라 하루종일 삽질했습니다! ㅋㅋㅋㅋ

감사합니다 ^^

0 Comments
댓글쓰기 폼