μ¬λ¬ urlμ fetchν λ, μ¬λ¬ inputμ μν μν λ³κ²½ λ± λ°λ³΅λλ λ‘μ§μ λμΌν ν¨μμμ μλνκ² νκ³ μΆμ λ 컀μ€ν ν μ μ£Όλ‘ μ¬μ©νλ€. μ΄λ₯Ό μ΄μ©νλ©΄
//FriendStatus : μΉκ΅¬κ° onlineμΈμ§ offlineμΈμ§ returnνλ μ»΄ν¬λνΈ
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
//FriendListItem : μΉκ΅¬κ° onlineμΌ λ μ΄λ‘μμΌλ‘ νμνλ μ»΄ν¬λνΈ
function FriendListItem(props) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
FriendStatus
μ»΄ν¬λνΈλ μ¬μ©μλ€μ΄ μ¨λΌμΈμΈμ§ μ€νλΌμΈμΈμ§ νμΈνκ³ , FriendListItem
μ»΄ν¬λνΈλ μ¬μ©μλ€μ μνμ λ°λΌ μ¨λΌμΈμ΄λΌλ©΄ μ΄λ‘μμΌλ‘ νμνλ μ»΄ν¬λνΈλ€. μ΄ λ μ»΄ν¬λνΈλ μ ννκ² λκ°μ΄ μ°μ΄λ λ‘μ§μ΄ μ‘΄μ¬νκ³ μλ€. μ΄ λ‘μ§μ λΉΌλ΄μ λ μ»΄ν¬λνΈμμ 곡μ ν μλ μμκΉ? Custom Hookμ μ¬μ©νλ€λ©΄ κ°λ₯νλ€.
function useFriendStatus(friendID) {
const [isOnline, setIsOnline] = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
λ μ»΄ν¬λνΈμμ μ¬μ©νκΈ° μν΄ λμΌνκ² μ¬μ©λκ³ μλ λ‘μ§μ λΆλ¦¬νμ¬ ν¨μ useFriendStatus
λ‘ λ§λ λ€.
useFriendStatus
Hookμ μ¨λΌμΈ μνμ μ¬λΆλ₯Ό boolean νμ
μΌλ‘ λ°ννκ³ μλ€.μ΄λ κ² λ§λ€μ΄μ§ Custom Hookμ Hook λ΄λΆμ useStateμ κ°μ React λ΄μ₯ Hookμ μ¬μ©νμ¬ μμ±ν μ μλ€. μΌλ° ν¨μ λ΄λΆμμλ React λ΄μ₯ Hookμ λΆλ¬ μ¬μ©ν μ μμ§λ§ Custom Hook μμλ κ°λ₯νλ€λ κ² λν μμλλ©΄ μ’μ μ μ΄λ€.
μ΄μ μ΄ useFriendStatus Hookμ λ μ»΄ν¬λνΈμ μ μ©ν΄λ³΄μ!
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}
λ‘μ§μ λΆλ¦¬ν΄ Custom HookμΌλ‘ λ§λ€μκΈ° λλ¬Έμ λ μ»΄ν¬λνΈλ λ μ§κ΄μ μΌλ‘ νμΈμ΄ κ°λ₯ν΄μ§λ€.
κ·Έλ¬λ κ°μ Custom Hookμ μ¬μ©νλ€κ³ ν΄μ λ κ°μ μ»΄ν¬λνΈκ° κ°μ stateλ₯Ό 곡μ νλ κ²μ μλλ€. κ·Έμ λ‘μ§λ§ 곡μ ν λΏ, stateλ μ»΄ν¬λνΈ λ΄μμ λ 립μ μΌλ‘ μ μ λμ΄ μλ€.