React { Hook }

Custom Hook 

일단 Custom Hook은 만들때 앞에 "use"를 붙이고 뒤에 이름을 CamelCase로 붙여준다. ex) useFetch

앞서서 배운 Element가 반복되는 경우는 함수로 대체하고 Hook 들이 반복이 되면 Custom Hook으로 대체한다. 

한번 JSONPlaceholder 서비스를 가짜 데이터를 fetch하여 todo 아이템 p태그 요소를 만드는 코드이다. 

 

 기존 코드

import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";

const Home = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/todos")
      .then((res) => res.json())
      .then((data) => setData(data));
 }, []);

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

하지만 다른 fetch logic이 다른 component에 필요할 수  도 있다. Custom Hook으로 바꿔보자 

 

하나의 다른 js파일로 따로 만들어서 Export를 해준다. 

// useFetch.js

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

그리고 index.js에서 Import에서 사용하는 모습까지... 

import ReactDOM from "react-dom/client";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

기존 fetch 로직에서 hard-coded URL을 url이라는 변수로 대체하여 custom hook 을 통하여 data를 반환하게 끔 만들었다. 이제 어떤 URL이든 fetch할수 있게된것이다. 

 

https://www.w3schools.com/react/react_customhooks.asp

React Custom Hooks

 

Hook flow Understand

 

useState로 만들어진 set함수는 인자로 이전값이 들어온다.  아래 코드는 Element 클릭시, 이전 값을 토글해주는 것이다.

  function handleClick(){
    setShow((prev) => !prev);
  }

 

 

useEffect Flow

랜더링은 부모요소 먼저 되고 자식요소가 그다음 랜더링이되고 useEffect는 자식요소인 child useEffect까지 다 끝나고 나서 App의 useEffect를 실행한다. child요소와 부모요소의 useEffect의 호출타이밍을 잘 못 알고 있으면 어떤 동작을 원하는 타이밍에 못 맞출 수 있다. 

 

어떠한 값이 Update 될때는 useEffect에 cleanup이라는 동작이 먼저 일어나고나서, useEffect가 실행된다. useEffect자체는 위에서 보여주는 것처럼 자식요소가  먼저 실행되지만, 값 업데이트에 앞서, Cleanup이라는 동작은 부모요소부터 실행된다. 아래 캡쳐를 확인해보자 

cleanup : useEffect는 실행전에 cleanup이라는 동작이 수행하는데, 이전 side effect(세팅) 생성해 놓은걸 정리하는 것을 이야기한다.