useFadeIn
const useFadeIn = () => {
const element = useRef();
useEffect(() => {})
return {ref : element, style : {opacity : 0}};
}
export default function App() {
const fadeInH1 = useFadeIn();
return (
<div className="App">
<h1 {...fadeInH1}>Hi</h1>
</div>
);
}
{ref : element, style : {opacity : 0}}을 return하여서 h1태그에 속성값으로 풀어준다 {...fadeInH1}
useEffect(() => {
if(element.current) {
const {current} = element;
current.style.transition = `opacity 3s`
current.style.opacity = 1;
}
}, [ ])
componentDidMount시에만 동작하게끔 함수뒤에 [ ] dependency 생성
style을 통한 css 속성값 부여
const useFadeIn = (duration = 1, delay = 0) => {
}
if(element.current) {
const {current} = element;
current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`
current.style.opacity = 1;
}
duration default값 1초 / delay default값 0초
transition 속성값의 시간값에 적용
const fadeInH1 = useFadeIn(2,2);
const fadeInP = useFadeIn(5,5);
함수안에 숫자를 받아서 앞의 숫자는 duration / 뒤의 숫자는 delay
const useFadeIn = (duration = 1, delay = 0) => {
const element = useRef();
useEffect(() => {
if(typeof duration !== "number" || typeof delay !== "number") {
return;
}
if(element.current) {
const {current} = element;
current.style.transition = `opacity ${duration}s ease-in-out ${delay}s`
current.style.opacity = 1;
}
}, [])
return {ref : element, style : {opacity : 0}};
}
export default function App() {
const fadeInH1 = useFadeIn(2,2);
const fadeInP = useFadeIn(5,5);
return (
<div className="App">
<h1 {...fadeInH1}>Hi</h1>
<p {...fadeInP}> test text </p>
</div>
);
}
useFadeIn 전체코드
useNetwork
navigator가 online 또는 offline이 되는걸 막아준다.
const useNetwork = onChange => {
const [status, setStatus] = useState(navigator.onLine);
return status;
};
useState에 default값으로 navigator.onLine을 작성하여 true / false 반환
useEffect(() => {
window.addEventListener("online", handleChange);
window.addEventListener("offline", handleChange);
return () => {
window.removeEventListener("online", handleChange);
window.removeEventListener("offline", handleChange);
};
});
componentWillUnMount일 때 remove이벤트 작성
const handleChange = () => {
if ( typeof onChange === "function"){
onChange(navigator.onLine);
}
setStatus(navigator.onLine);
};
navigator 상태에 따라 setStatus / onChange
const handleNetworkChange = online => {
console.log(online? "handle online" : "handle offline");
}
const onLine = useNetwork(handleNetworkChange);
<h1>{onLine ? "Online" : "Offline"}</h1>
true 반환시 html에 Online 출력, console에 handle online 출력
const useNetwork = onChange => {
const [status, setStatus] = useState(navigator.onLine);
const handleChange = () => {
if ( typeof onChange === "function"){
onChange(navigator.onLine);
}
setStatus(navigator.onLine);
};
useEffect(() => {
window.addEventListener("online", handleChange);
window.addEventListener("offline", handleChange);
return () => {
window.removeEventListener("online", handleChange);
window.removeEventListener("offline", handleChange);
};
}, []);
return status;
};
export default function App() {
const handleNetworkChange = online => {
console.log(online? "handle online" : "handle offline");
}
const onLine = useNetwork(handleNetworkChange);
return (
<div className="App">
<h1>{onLine ? "Online" : "Offline"}</h1>
</div>
);
}
useNetwork 전체코드
