Hook 예제 코드

Sasha Park·2021년 4월 9일
0
import React, {useState, userEffect} from 'react';

function FriendStatus(props){
	const [isOnline, setIsOnline ] = useState(null);
}

function handleStatusChange(status) {
	setIsOnline(status.isOnline);
}

useEffect(() => {
	ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return 90 => {
	ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
});

if(isOnline === null ) {
	return 'Loading...'
}
return isOnline ? 'Online': 'Offline';
}


Hook 사용 규칙
Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 합니다.

 1. 최상위(at the top level)에서만 Hook을 호출해야 합니다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 마세요.

 2. React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다. 일반 JavaScript 함수에서는 Hook을 호출해서는 안 됩니다. (Hook을 호출할 수 있는 곳이 딱 한 군데 더 있습니다. 바로 직접 작성한 custom Hook 내입니다. 이것에 대해서는 나중에 알아보겠습니다.)
profile
'어?' 에서 '아!'가 되는 순간을 즐기는 개발자입니다.

0개의 댓글