# useFadeIn의 기능

import {useEffect, useRef} from "react";

export const useFadeIn = (duration = 1, delay = 0) => {
    if (typeof duration !== "number" || typeof delay !== "number") {
        return;
    }

    const element = useRef();

    useEffect(() => {
        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 } };
};

useFadeIn은 opacity를 사용하여 서서히 나타나는 기능을 사용할때 쓰는 hook이다.

반환값은 { ref: element, style: { opacity: 0 } } 을 반환한다.

즉 style.opacity를 통해서 투명도에 접근할 수 있게 만들어 준다.

# 설명

if (typeof duration !== "number" || typeof delay !== "number") {
    return;
}

우선 가장먼저 첫번째 전달인자(duration)와 두번째 전달인자(delay)가 숫자인지 확인하여 유효성 검사를 한다.

const element = useRef();

이 후에 element라는 변수를 선언해주고 useRef()를 할당해주고 임포트 시켜준다.( import {useRef} from "react" )

useRef로 인해 element는 ref(refenrence)속성으로 접근 가능하게 된다.

ex) <div ref={element} > hi </div>

그리고 useRef가 할당된 변수에는 current라는 속성이 추가되고, 이는 할당된 변수의 속성 전체를 감싸는 속성이 된다.

	useEffect(() => {
        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 } };

useEffect를 사용해서 ( element.current )가 true일때 = ( useRef가 할당된 변수일때 ) 함수를 실행하도록 만든다.

구조분해할당을 사용하여 element에서 current 속성을 가져온 후에 스타일에 접근하여

transition과 opacity를 변경할 수 있도록 구성해준다.

useFadeIn의 반환값은 ref: element , style: { opacity: 0 } 의 속성을 반환한다.

# 사용예시

 const fadeInH1 = useFadeIn(1, 2);
 const fadeInP = useFadeIn(5, 10);

 <h1 {...fadeInH1}>hello</h1>
 <p {...fadeInP}>holly sheet</p>

fadeInH1과 fadeInP를 선언해서 각각 h1,p 시멘틱테그에 적용할 수 있도록 만들어 준다.

useFadeIn의 첫번째 전달인자는 duration이고 두번째 전달인자는 delay이다.

속성(attribute)에 보면 { ...변수명 } 으로 해준 부분은 결과적으로 변수에 할당된 값을 적용(가져온다)시킨다는 뜻이다.

그렇게 되면 useFadeIn의 반환값인 { ref: element, style: { opacity: 0 } }를 가져오게 되고

각 전달인자에서 받은 값들이 적용된 결과를 보여주게 된다.