쓴 이유는 ?

커스텀훅을 설명하기에 앞서 사용한 이유와 찾은 경로가 제일 중요한 것 같다.

일단 2차클로닝프로젝트(킨포크)를 진행하면서 로고 스크롤 이벤트를 진행하다 알게 된 것인데.. 찾게 된 이유는 기존의 addEventListener를 이용하면 매 스크롤 순간마다 어마어마한 전체렌더가 이루어져 브라우저가 렉이 먹는 신세계를 경험했기 때문이다.

왜냐면 대략 아래와 같은 코드로 이루어졌었기 때문인데( 지금 다 수정을 해서 기억을 뒤지고 있다 하하하하)
ref를 로고에 걸어놓고 그 스타일은 matrix효과를 통해 크기를 바꿔주는 형식을 택했었다.

지금 생각해보면 당연히 기능에 부하가 많이 걸릴 수 밖에 없는 구조였는 것이
매번 state를 리셋시키고 그에 따라서 화면이 전체가 렌더된다.
근데 그 매번이 스크롤1이라도 바뀌면 매번 일어나는 것이니 컴퓨터가 비행기소리가 안날수가 없던것이다.

const [scroll, setScroll] = useState(0)
const ScrollY = window.scrollY
const LogoRef = useRef(null)
useEffect (()=>{
const ScrollY = window.scrollY
if(scrollY >= 0){	
	LogoRef.current.style ......
}
},[ScrollY])

그래서 여러 자료들을 찾아보곤 하다 동기분께서 좋은 블로그를 소개 시켜주셔서 공부하고 적용을 해보았다.

사실 해당블로그에 이미 다 적혀있는 흔히 말하는 안좋은예시를 신나게 하고 있었기 때문에 심히 당황스러운 마음을 가다듬고 하나씩 적용해 보았었다.

아래는 블로그를 보며 공부하며 적용한 실제의 코드이다.

하나씩 뜯어보자 :)

IntersectionObserver, observe

일단 Hook 속성들을 사용하기 위해 import를 다 해왔다.

그리고 dom 이라는 이름의 ref를 만들어 적용하기 위해서 변수로 선언했으며

그럼 이제 진짜로 custom훅을 살펴보자 허허허..

handleScroll이라는 함수는 콜백으로 사용되며 useEffect의 observer의 조건에 알맞아 떨어질때마다 불러지게 될 것이다.

여기서 노란 글씨로 되어있는 IntersectionObserver가 당연히 눈에 띌 것인데 이는 간단히 말해서 viewPort(화면크기라고 간단하게 말하면 될듯)의 변화를 비동기적으로 계속 감시해주는 것이다. 말그대로 observer다.

해당 API뒤에는 두가지 인자를 넣으면 되는데 우선 선정해둔 콜백함수 두번째에는 IntersectionObserver.thresholds : 1 을 구조분해한것이라 생각하면 되는데 이는 0에서부터 오름차순으로 경계대상의 영역과 외부?와의 교차영역에 대한 숫자라고 생각하면 되며 1은 뭐.. 매번 감시되는 것이라고 보면 될 것 같다.

• Nav바에 존재하는 로고를 적용해야하는 것이기 때문에 그냥 1을 넣을 수 밖에 없었다.

  그리고 리턴을 통해 observe로 정해준 지점을 observe() 함수를 사용하여 감시를 시작하게 만들었으며 감시한결과를 리턴하는데 참고로 observer함수의 return 값은 undefined이다.

반환되는것은 observer 변수이다 !
observer변수가 리턴되면 콜백함수가 실행된다
아래는 설명!(출처는 언제나 그렇듯 mdn아니면 ModerJs)

window.pageYOffset;

이제 그 콜백함수를 살펴보자

사실 pageYoffeset, scrollY는 그냥 이름만 다른것이지 같은 것임으로 구체적 설명을 패스하고 .. 해당 속성은 문서가 수직으로 얼마나 스크롤이 되었는지 px단위로 반환을 해주는 것이다.

내가 필요로 했던 것은 matrix값의 변화가 scroll에따라 변경이 되어야 했기 때문에 scrollY의 값을 이용하여 (1,0,0,1,0,0) 을 (5,0,0,5,0,190)으로 변경을 하기위해 본래의 사이트와 비교하여 간단한 계산을 이용한 뒤 조건을 걸고 사용했다.

이런 걸 할때마다 이게 뭐하는 짓인가 싶을때가 종종 있긴한데 ..그래도 잘 적용되니 기분이 좋다

특별한 사항이 사실 없어서 이정도로 마무리해야 할것 같다 ㅇㅁㅇ..

아래는 적용한 화면이다

custom Hook 사용은 어떻게 ?

참고로 customHook을 적용할 때는 따로 변수안에 넣어준다거나 props로 받거나의 행동이 아니라 별개의 파일로 만들어 그것을 import시켜 필요한곳에 긁어 넣어주면 된다

아래와 같이 적용하고 싶은 파일로 데리고 와서 변수로 설정해주고

  const ScrollLogoMatrix = useScrollLogo();

아래와 같이 spread연산자를 이용해서 긁어오면 알아서 custom된 범위에 맞춰 적용이 될것이다 !

알아보며 사용할때는 하나씩 살펴보며 적용하느라 시간이 정말 많이들었는데 막상 적어놓고 보니 그리 어렵지 않은 스킬인 것 같기도하다. 왜냐면 내가 100프로 이해를 못했기 때문인건가 싶기도하고 .. 아무쪼록 계속적인 공부가 필요한 상태인 것 같다.

그럼 뿅