React - 커스텀 훅을 만들면서

배운점

1. 커스텀 훅 내부에서 ref를 선언하고, 해당 ref를 반환한 다음 원하는 컴포넌트에 ref를 지정해 연결하는 방법

2. 위에서 등록한 ref의이벤트를 지정하는 방법

3. scroll 이벤트의 passive 속성

passive : true
브라우저에게 이벤트 핸들러가 스크롤을 막지 않을 것임을 알려줍니다. 이렇게 함으로써 성능 향상이 이루어질 수 있습니다.
이때마다 핸들러 함수에서 event.preventDefault()를 호출하면 브라우저가 스크롤 동작을 계속 기다려야 하므로 성능에 영향을 미칠 수 있습니다.
passive: true를 사용하면 브라우저가 핸들러 함수에서 기본 동작을 막지 않을 것으로 예상하므로 성능이 향상됩니다.

 

4. scrollTo 함수

scrollTo 함수는 웹 페이지의 스크롤 위치를 지정한 좌표로 이동시키는 JavaScript의 메서드입니다.

이 함수를 사용하면 스크롤 위치를 원하는 곳으로 매끄럽게 이동시킬 수 있습니다.

// 스크롤 위치를 (0, 0)으로 매끄럽게 이동
window.scroll({
  top: 0,
  left: 0,
  behavior: 'smooth' // 'auto' 또는 'instant' 등 다양한 옵션 가능
});

5. ResizeObserver 사용법

const observer = new ResizeObserver(entries => {
      savedHandler.current(entries[0].contentRect)
 })

 observer.observe(element)

6. ref의 값이 콜백함수면?

//ref가 콜백함수면
const savedHandler = useRef(handler)

...

// 아래와 같이 함수로 사용 가능하다.
savedHandler.current(entries[0].contentRect)

7. useLocalStorage와 useSessionStorage 만드는법

 

 

 

 

 

헷갈렸던 점

1. ref를 등록해준 컴포넌트에는 클릭이벤트를 넘겨주지 않는데 어떻게 useClickAway(e => {...});에서

e 인자가 마우스이벤트를 받는 걸까?

-> ref가 생성되면 useClickAway로가서 ref도 생성하고, 이런저런 일을 한다.

-> 그리고 이 때 전역에 이벤트를 등록한다 (document.addEventListener)

-> 그리고 이 이벤트의 콜백함수를 useClickAway(e => {...});로 등록한다.

-> 그래서 클릭이벤트가 일어나면 useClickAway(e => {...}); 의 e는 Event 객체가 된다.

 

2. useClickAway 커스텀 훅의 생명주기

useClickAway(함수)로 커스텀 훅에 함수를 보내주는데

해당 함수가 호출 되면 setState가 호출되어서 렌더링이 된다.

렌더링이 됨으로써 다시 커스텀 훅을 호출하던 변수는 초기화가 되고, handler함수를 다시 보내주게 된다.

이 때 보내주는 함수는 눈으로 보기에는 똑같지만 함수는 객체이므로 렌더링 이전의 함수와 달라지게 된다.

그러므로 커스텀 훅 내부의 useEffect가 실행되고, saveHandler의 함수는 바뀌게 된다.

그리고 마우스 이벤트가 일어나면 등록되어있던 handleEvent가 실행되는데 이때 saveHanlder는 바뀌었으므로 바뀐 함수를 실행한다(하지만 눈으로 보기에는 똑같은 함수)

 

이벤트가 일어날 때마다 커스텀 훅 내부의 useEffect가 호출되는데 

성능 최적화를 위해 useCallback을 사용했다.

  //useCallback을 사용해서 handler의 useEffect 호출 성능 최적화
  const handleOutsideClick = useCallback(e => {
    // button도 영역 외의 요소이기 때문에 분기 처리 필요
    if (e.target.tagName !== 'BUTTON') {
      setShow(false)
    }
  }, [])
  const ref1 = useClickAway(handleOutsideClick)

이를 통해 눈으로 보기에 똑같은 함수이면 커스텀 훅 내부에서 useEffect가 실행되지 않는다.

즉 렌더링이 되어도 커스텀 훅 내부의 saveHandler는 바뀌지 않는다(어차피 같은 함수니까)

 

 

 3.왜 show 클릭-> 영역외 클릭 후 영역외 부분를 클릭하면 또 렌더링이 될까?(렌더링이아닌 것같은 로그가 또 출력됨)

- show를 클릭하면 setState가 일어나서 렌더링이 된다.

- 다시 영역외의 부분을 클릭하면 setState가 바뀌므로 렌더링이 된다.

- 근데 또다시 영역외의 부분을 클릭하면 렌더링이 되었다고 콘솔로그가 뜬다.

왜 그런  것일까?