[DAY-54] React (7)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
오늘도 열심히 사용자 정의 훅들에 대해 실습했다.
useInterval과 useTimeout은 Fn(함수) 파일들을 나누어 작성했다.
차이는 간단하다. 시작을 눌러주느냐 컴포넌트가 로드되자마자 실행되느냐.

useDebounce는 향후 제작할 프로젝트에서도 굉장히 유용하게 사용될 것 같다.
useInterval을 사용하면 쓰로틀링 방식도 Hook으로 구현할 수 있지 않을까.

[1] 컴포넌트 실습

useResize

// useResize.js
import { useEffect, useRef } from "react";

const useResize = (handler) => {
  const savedHandler = useRef(handler);
  const ref = useRef(null);

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    const element = ref.current;
    if (!element) return;

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

    observer.observe(element);

    return () => {
      observer.disconnect();
    };
  }, [ref]);

  return ref;
};

export default useResize;

// useResize.stories.js
import styled from "@emotion/styled";
import { useState } from "react";
import Image from "../../components/_BasicComponent/Image";
import useResize from "../../hooks/useResize";

export default {
  title: "Hook/useResize",
};

const Background = styled.div`
  width: 100%;
  height: 400px;
  background-color: blue;
`;

export const Default = () => {
  const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
  const ref = useResize((rect) => {
    setImageSize({ width: rect.width, height: rect.height });
  });

  return (
    <Background ref={ref}>
      <Image
        width={imageSize.width}
        height={imageSize.height}
        src="https://picsum.photos/1000"
        mode="contain"
      />
    </Background>
  );
};

useLocalStorage, useSessionStorage

LocalStorage와 SessionStorage이용 방법은 동일하기에, 저장소 이름만 바꿔주면 된다.

따라서 코드는 useLocalStorage만 첨부한다.

// useLocalStorage.js
import { useState } from "react";

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore =
        typeof value === "function" ? value(storedValue) : value;

      setStoredValue(valueToStore);
      localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };

  return [storedValue, setValue];
};

export default useLocalStorage;

// useLocalStorage.stories.js
import useLocalStorage from "../../hooks/useLocalStorage";

export default {
  title: "Hook/useLocalStoreage",
};

export const Default = () => {
  const [status, setStatus] = useLocalStorage("status", "404 NOT FOUND");

  return (
    <div>
      <button onClick={() => setStatus("200 OK")}>Resend</button>
      {status}
    </div>
  );
};

useForm

정규 표현식 어렵다….

더 복잡한 정규 표현식을 사용한다는데, 알아보고 프로젝트에서 적용해봐야겠다.

// useForm.js
import { useState } from "react";

const useForm = ({ initialValues, onSubmit, validate }) => {
  const [values, setValues] = useState(initialValues);
  const [errors, setErrors] = useState({});
  const [isLoading, setIsLoading] = useState(false);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  };

  const handleSubmit = async (e) => {
    setIsLoading(true);
    e.preventDefault();

    const newErrors = validate(values);

    if (Object.keys(newErrors).length === 0) {
      await onSubmit(values);
    }

    setErrors(newErrors);
    setIsLoading(false);
  };

  return {
    values,
    errors,
    isLoading,
    handleChange,
    handleSubmit,
  };
};

export default useForm;

// useForm.stories.js
import useForm from "../../hooks/useForm";

export default {
  title: "Hook/useForm",
};

const sleep = () => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), 1000);
  });
};

export const Default = () => {
  const { isLoading, errors, handleChange, handleSubmit } = useForm({
    initialValues: {
      email: "",
      password: "",
    },
    onSubmit: async (values) => {
      await sleep();
      alert(JSON.stringify(values));
    },
    validate: ({ email, password }) => {
      const errors = {};
      if (!email) errors.email = "이메일을 입력해주세요.";
      if (!password) errors.password = "비밀번호를 입력해주세요.";
      if (!/^.+@.+\..+$/.test(email))
        errors.email = "올바른 이메일을 입력해주세요.";

      return errors;
    },
  });
  return (
    <form onSubmit={handleSubmit}>
      <h1>Sign In</h1>
      <div>
        <input
          name="email"
          type="email"
          placeholder="email"
          onChange={handleChange}
        />
        {errors.email}
      </div>
      <div>
        <input
          name="password"
          type="password"
          placeholder="password"
          onChange={handleChange}
        />
        {errors.password}
      </div>
      <button type="submit" disabled={isLoading}>
        {isLoading ? "Loading..." : "Submit"}
      </button>
    </form>
  );
};

useTimeout

useTimeout은 useTimeoutFn훅을 사용한다.

// useTimeoutFn.js
import { useRef, useEffect, useCallback } from "react";

const useTimeoutFn = (fn, ms) => {
  const timeoutId = useRef();
  const callback = useRef(fn);

  useEffect(() => {
    callback.current = fn;
  }, [fn]);

  const run = useCallback(() => {
    timeoutId.current && clearTimeout(timeoutId.current);

    timeoutId.current = setTimeout(() => {
      callback.current();
    }, ms);
  }, [ms]);

  const clear = useCallback(() => {
    timeoutId.current && clearTimeout(timeoutId.current);
  }, []);

  useEffect(() => clear, [clear]);

  return [run, clear];
};

export default useTimeoutFn;

// useTimeout.js
import { useEffect } from "react";
import useTimeoutFn from "./useTimeoutFn";

const useTimeout = (fn, ms) => {
  const [run, clear] = useTimeoutFn(fn, ms);

  useEffect(() => {
    run();
    return clear;
  }, [run, clear]);

  return clear;
};

export default useTimeout;

// useTimeoutFn.stories.js
import useTimeoutFn from "../../hooks/useTimeoutFn";

export default {
  title: "Hook/useTimeoutFn",
};

export const Default = () => {
  const [run, clear] = useTimeoutFn(() => {
    alert("실행");
  }, 3000);
  return (
    <>
      <div>useTimeoutFn Test</div>
      <button onClick={run}>3초 뒤 실행</button>
      <button onClick={clear}>Stop</button>
    </>
  );
};

// useTimeout.stories.js
import useTimeout from "../../hooks/useTimeout";

export default {
  title: "Hook/useTimeout",
};

export const Default = () => {
  const clear = useTimeout(() => {
    alert("실행");
  }, 3000);
  return (
    <>
      <div>useTimeout Test</div>
      <button onClick={clear}>Stop</button>
    </>
  );
};

useInterval

useInterval은 useIntervalFn훅을 사용한다.

// useIntervalFn.js
import { useRef, useEffect, useCallback } from "react";

const useIntervalFn = (fn, ms) => {
  const intervalId = useRef();
  const callback = useRef(fn);

  useEffect(() => {
    callback.current = fn;
  }, [fn]);

  const run = useCallback(() => {
    intervalId.current && clearInterval(intervalId.current);

    intervalId.current = setInterval(() => {
      callback.current();
    }, ms);
  }, [ms]);

  const clear = useCallback(() => {
    intervalId.current && clearInterval(intervalId.current);
  }, []);

  useEffect(() => clear, [clear]);

  return [run, clear];
};

export default useIntervalFn;

// useInterval.js
import { useEffect } from "react";
import useIntervalFn from "./useIntervalFn";

const useInterval = (fn, ms) => {
  const [run, clear] = useIntervalFn(fn, ms);

  useEffect(() => {
    run();

    return clear;
  }, [run, clear]);

  return clear;
};

export default useInterval;

// useIntervalFn.stories.js
import { useState } from "react";
import useIntervalFn from "../../hooks/useIntervalFn";

export default {
  title: "Hook/useIntervalFn",
};

export const Default = () => {
  const [array, setArray] = useState([]);
  const [run, clear] = useIntervalFn(() => {
    setArray([...array, "Plus"]);
  }, 1000);

  return (
    <>
      <div>useIntervalFn Test</div>
      <div>{array}</div>
      <button onClick={run}>1초마다 추가!</button>
      <button onClick={clear}>Clear</button>
    </>
  );
};

// useInterval.stories.js
import { useState } from "react";
import useInterval from "../../hooks/useInterval";

export default {
  title: "Hook/useInterval",
};

export const Default = () => {
  const [array, setArray] = useState([]);
  const clear = useInterval(() => {
    setArray([...array, "Plus"]);
  }, 1000);

  return (
    <>
      <div>useInterval Test</div>
      <div>{array}</div>
      <button onClick={clear}>Clear</button>
    </>
  );
};

useDebounce

eslint경고가 떠서 disactive 주석을 넣어버렸다.

// useDebounce.js
import { useEffect } from "react";
import useTimeoutFn from "./useTimeoutFn";

const useDebounce = (fn, ms, deps) => {
  const [run, clear] = useTimeoutFn(fn, ms);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(run, deps);

  return clear;
};

export default useDebounce;

// useDebounce.stories.js
import { Fragment, useState } from "react";
import useDebounce from "../../hooks/useDebounce";

export default {
  title: "Hook/useDebounce",
};

const companies = ["Kakao", "Naver", "Coupang", "Line", "Woowahan"];

export const Default = () => {
  const [value, setValue] = useState("");
  const [result, setResult] = useState([]);

  useDebounce(
    () => {
      if (value === "") setResult([]);
      else {
        setResult(
          companies.filter((company) =>
            company.toLowerCase().includes(value.toLowerCase())
          )
        );
      }
    },
    300,
    [value]
  );

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <div>
        {result.map((item) => (
          <Fragment key={item}>
            {item}
            <br />
          </Fragment>
        ))}
      </div>
    </div>
  );
};

---

출처

프로그래머스