Custom hooks 실습 후기

arrrrrr·2023년 2월 17일

React

React 공부중 🎽

목록 보기

7/16

노마드코더 hooks 10 강의를 들으며 커스텀 hooks를 만들었다. 훅의 개념을 정리하고, 새로운 문법을 배울 수 있어 좋았다.

Hook은 생각보다 최근에 등장했다.

리액트는 클래스 컴포넌트를 사용하다가, 2019년 2월에 데이터 캐시를 개발하였다.
캐시는 함수 컴포넌트가 어떤 값을 유지할 수 있도록 해주는데, 이 캐시를 이용하고자 만들어진 API가 리액트 훅 함수이다.
훅은 함수형 컴포넌트에서 state를 가질 수 있음을 의미하여, 훅을 쓴다는 것은 곧 함수형 프로그래밍임을 의미한다.

Hook 사용 규칙

훅은 render(여기) 안에서는 사용할 수 없다.
비동기 함수는 콜백함수로 사용할 수 없다.

useEffect(async () => { // hook 내에서 비동기 실행 안됨 
    await Promise.resolve(1)
  }, [])

Custom hook을 만들면서 어려웠던 점

useRef() 이해하기

useRef()는 document. getElementById() 와 같은 기능을 한다.
사용: 태그(div, p...)에 ref={reference 이름} 속성을 주어 연결한다.
반환: 반환 값은 {current: HTMLHeadingElement}의 형식이다.

useEffect() clean-up & EventListener 이해하기

클린업 함수란?

useEffect()의 return에 들어가는 함수를 의미한다.

작동순서: re-render → 이전의 effect clean-up → 새로운 effect

클린업 실행 시점이 늦는 이유

Clean-up 함수는 이전 값을 바라보기 때문이다.

컴포넌트 내의 모든 함수는 렌더가 호출될때 정의된 props와 state 값을 잡아둔다.

하지만 effect clean-up은 최신 props를 읽어오지 않는다. 클린업이 정의된 시점의 값을 읽어온다.

handler는 window.addEventListener가 호출되는 시점에 고정되기 때문이다.

addEventListener에서 클린업 함수를 써야하는 이유는?

Eventlistener는 한번 추가된 이벤트(scroll 등)가 변하면 브라우저에 관련 이벤트를 계속 추가한다.

브라우저가 호출해야하는 이벤트의 개수(=함수의 개수)를 줄이기 위해 안쓰는 lisntner 제거 목적으로 클린업 함수를 사용한다. (removeEventListener)

즉, 메모리 관리에 유용하다.

클린업 함수가 사용되는 코드

import { useEffect, useState, useRef } from "react";

const useScroll = () => {
  const [state, setState] = useState({
    x: 0,
    y: 0
  });
  const onScroll = () => {
    console.log(window.scrollY);
    // 스크롤 이동하면 스테이트 변경
    setState({ y: window.scrollY, x: window.scrollX });
  };
  useEffect(() => {
    window.addEventListener("scroll", onScroll); //
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return state;
};

export default function App() {
  const { y } = useScroll();
  return (
    <div className="App" style={{ height: "1000vh" }}>
      <h1 style={{ position: "fixed", color: y > 100 ? "red" : "blue" }}>
        {" "}
        hi{" "}
      </h1>
    </div>
  );
}