16. Hook Library

16.1 훅 라이브러리란?

16.2 React Hook Form

16.2.1 React Hook Form이란?

💡

제어 컴포넌트 vs 비제어 컴포넌트

React 공식 문서에서 제어 컴포넌트와 비제어 컴포넌트에 대해 설명하고 있습니다.

React 기술 용어 모음 - React

싱글 페이지 애플리케이션(Single-page application, SPA)은 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드하는 애플리케이션입니다. 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않습니다. React를 사용하여 싱글 페이지 애플리케이션을 만들 수 있지만, 필수 사항은 아닙니다. 기존 웹사이트 일부분의 상호작용을 개선하기 위하여 React를 사용할 수 있습니다.

https://ko.reactjs.org/docs/glossary.html#%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-vs-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

💡

react-hook-form

react-hook-form

Performant, flexible and extensible forms library for React Hooks. Latest version: 7.41.5, last published: 7 days ago. Start using react-hook-form in your project by running `npm i react-hook-form`. There are 2124 other projects in the npm registry using react-hook-form.

https://www.npmjs.com/package/react-hook-form

16.2.2 React Hook Form 설치방법

npm install react-hook-form

yarn add react-hooks-form

import { useForm } from "react-hook-form";

const { register, handleSubmit, formState: { errors }, } = useForm();

16.2.3 React Hook Form 사용하여 validation 하기

<input {...register("age")} />

import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>나이</label>
      <input {...register("age")} />
      <input type="submit" />
    </form>
  );
}

export default App;

	...
      <input {...register("age", { min: 20, max: 99 })} />
	...

import { useForm } from "react-hook-form";

function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>나이</label>
      <input {...register("age", { min: 20, max: 99 })} />
      {errors.age && <p>20세부터 99세까지만 이용 가능합니다.</p>}
      <input type="submit" />
    </form>
  );
}

export default App;

16.2.4 React Hook Form 사용하여 회원가입 validation 하기

import { useState } from "react";

export default function App() {
  const [email, setEmail] = useState("");
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const [passwordConfirm, setPasswordConfirm] = useState("");

  const [emailMessage, setEmailMessage] = useState("");
  const [nameMessage, setNameMessage] = useState("");
  const [passwordMessage, setPasswordMessage] = useState("");
  const [passwordConfirmMessage, setPasswordConfirmMessage] = useState("");

  const [isEmail, setIsEmail] = useState(false);
  const [isName, setIsName] = useState(false);
  const [isPassword, setIsPassword] = useState(false);
  const [isPasswordConfirm, setIsPasswordConfirm] = useState(false);

  const onSubmit = (e) => {
    e.preventDefault();
    console.log("data", e.target);
  };

  const onEmailChange = (e) => {
    setEmail(e.target.value);
    const emailCurrent = e.target.value;
    const emailRegex = /^\S+@\S+$/i;
    if (e.target.value.length === 0) {
      setEmailMessage("이메일을 입력하세요");
      setIsEmail(false);
    } else if (!emailRegex.test(emailCurrent)) {
      setEmailMessage("이메일 형식으로 입력해주세요");
      setIsEmail(false);
    } else {
      setIsEmail(true);
    }
  };

  const onNameChange = (e) => {
    setName(e.target.value);
    if (e.target.value.length === 0) {
      setNameMessage("이름을 입력하세요");
      setIsName(false);
    } else if (e.target.value.length > 10) {
      setNameMessage("10글자 이내로 입력하세요");
      setIsName(false);
    } else {
      setIsName(true);
    }
  };

  const onPasswordChange = (e) => {
    setPassword(e.target.value);
    if (e.target.value.length === 0) {
      setPasswordMessage("비밀번호를 입력하세요");
      setIsPassword(false);
    } else if (e.target.value.length < 6) {
      setPasswordMessage("6자 이상 입력하세요");
      setIsPassword(false);
    } else {
      setIsPassword(true);
    }
  };

  const onPasswordConfirmChange = (e) => {
    setPasswordConfirm(e.target.value);
    if (e.target.value.length === 0) {
      setPasswordConfirmMessage("비밀번호를 입력하세요");
      setIsPasswordConfirm(false);
    } else if (e.target.value !== password) {
      setPasswordConfirmMessage("비밀번호가 일치하지 않습니다");
      setIsPasswordConfirm(false);
    } else {
      setIsPasswordConfirm(true);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <input
        placeholder="이메일"
        type="email"
        value={email}
        onChange={onEmailChange}
      />
      <input placeholder="이름" value={name} onChange={onNameChange} />
      <input
        placeholder="비밀번호"
        type="password"
        value={password}
        onChange={onPasswordChange}
      />
      <input
        placeholder="비밀번호 확인"
        type="password"
        value={passwordConfirm}
        onChange={onPasswordConfirmChange}
      />

      <input type="submit" />

      {isEmail ? undefined : <p>{emailMessage}</p>}
      {isName ? undefined : <p>{nameMessage}</p>}
      {isPassword ? undefined : <p>{passwordMessage}</p>}
      {isPasswordConfirm ? undefined : <p>{passwordConfirmMessage}</p>}
    </form>
  );
}

import { useForm } from "react-hook-form";

export default function App() {
  const {
    register,
    handleSubmit,
    watch,
    formState: { errors }
  } = useForm({ mode: "onChange" }); // --- ⓷

  const onSubmit = (data) => {
    console.log("data", data);
  }; // --- ⓹

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input // --- ⓵
        placeholder="이메일"
        type="email"
        {...register("email", {
          required: {
            value: true,
            message: "이메일을 입력하세요"
          },
          pattern: {
            value: /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/i, // 이메일 형식 확인
            message: "이메일 형식이 아닙니다"
          }
        })}
      />
      <input
        placeholder="이름"
        {...register("name", {
          required: {
            value: true,
            message: "이름을 입력하세요"
          },
          maxLength: {
            value: 10,
            message: "10글자 이내로 입력하세요"
          }
        })}
      />
      <input
        placeholder="비밀번호"
        type="password"
        {...register("password", {
          required: {
            value: true,
            message: "비밀번호를 입력하세요"
          },
          minLength: {
            value: 6,
            message: "6자 이상 입력하세요"
          }
        })}
      />
      <input
        placeholder="비밀번호 확인"
        type="password"
        {...register("passwordConfirm", {
          required: {
            value: true,
            message: "비밀번호를 입력하세요"
          },
          validate: (value) => {
            if (watch("password") !== value) {
              return "비밀번호가 일치하지 않습니다";
            }
          }
        })} // --- ⓸
      />

      <input type="submit" />

      {errors.email && <p>{errors.email.message}</p>} // --- ⓶ 
      {errors.name && <p>{errors.name.message}</p>}
      {errors.password && <p>{errors.password.message}</p>}
      {errors.passwordConfirm && <p>{errors.passwordConfirm.message}</p>}
    </form>
  );
}

🚨

useForm()의 mode

사용 가능한 값은 아래와 같으며, 각각의 속성에 대한 설명은 react-hook-form 공식 문서에서 확인할 수 있습니다.

mode: onChange | onBlur | onSubmit | onTouched | all = 'onSubmit'

useForm

React hooks for form validation useForm is a custom hook for managing forms with ease. It takes one object as optional argument. The following example demonstrates all of its properties along with their default values.

https://react-hook-form.com/api/useform/

 

16.3 react-router-dom에서 지원하는 Hook

16.3.1 react-router-dom이란?

<BrowserRouter>
	<Routes>
		<Route path="경로" element={<연결할 컴포넌트 />} />
	</Routes>
</BrowserRouter>

import { BrowserRouter, Routes, Route } from "react-router-dom";
// ...

function App() {
  return (
    <BrowserRouter>
			<Routes>
				{/* 중첩 Route */}
	      <Route path="/" element={<Home />}>
		      <Route path="about" element={<About />} />
	        <Route path="product" element={<Product />} />
	      </Route>
				{/* 일치하는 Route가 없을 경우 NotFound 컴포넌트 연결 */}
				<Route path="*" element={<NotFound />} />
	    </Routes>
    </BrowserRouter>
  );
}

export default App;

16.3.2 react-router-dom 설치방법

npm install react-router-dom

yarn add react-router-dom

16.3.3 useLocation

import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";

// Home 컴포넌트
function Home() {
  const location = useLocation();
  console.log(location);

  return <h1>Home</h1>;
}

// App 컴포넌트
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

{
  pathname: "/home",
  search: "?event=instagram",
  hash: "#product",
  state: null,
  key: "abcd12ef"
}

const navigate = useNavigate();
  navigate("/user/userdetail", {
    state: {
      data: "my data",
      username: "minji",
      userID: "ming123",
    },
  });

const location = useLocation();
const userData = { ...location.state };

16.3.4 useNavigate

import { BrowserRouter, Routes, Route } from "react-router-dom";
// ...

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="profile/:nickname" element={<Profile />} />
        </Route>
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import { useNavigate } from "react-router-dom";

function HomePage() {
  const navigate = useNavigate();

  return (
    <main>
      <h1>hook 님의 홈페이지에 오신 것을 환영합니다.</h1>
      <button onClick={() => navigate("/profile/hook")}>
        hook 님의 프로필 보기
      </button>
    </main>
  );
}

export default HomePage;

import { useHistory } from "react-router-dom";

function HomePage() {
  const history = useHistory();

  return (
    <main>
      <h1>hook 님의 홈페이지에 오신 것을 환영합니다.</h1>
      <button onClick={() => history.push("/profile/hook")}>
        hook 님의 프로필 보기
      </button>
    </main>
  );
}

export default HomePage;

• navigate 함수 두번째 인자에 { replace: true } 를 전달하면 replace 액션이 실행되어 기록 스택의 가장 상단 페이지를 이동하려는 페이지로 교체합니다.

• navigate 함수에 숫자를 인자로 전달하면 해당 숫자만큼 전/후에 방문했던 페이지로 이동하게 됩니다. 예를 들어, navigate(-1)은 직전에 방문했던 페이지로 이동합니다.

💡

기록 스택(history stack)이란?

DOM의 window 객체는 history 객체를 통해 브라우저의 세션 기록에 접근하는 다양한 방법을 제공합니다. history 객체 내 back(), forward(), go() 메서드를 사용해 브라우저 기록을 조작할 수 있습니다. 브라우저 기록은 제일 최근에 방문한 페이지가 기록 제일 상단에 있고, 뒤로 가기 버튼을 누르면 바로 이전 페이지를 다시 방문할 수 있는 스택의 형태로 구현되어 있습니다. 기록 스택을 토대로 우리는 브라우저에서 뒤로 가기 버튼을 계속 누르고 있으면 방문 기록(그림 3-1)을 확인할 수 있습니다.

import { useNavigate } from "react-router-dom";

function HomePage() {
  const navigate = useNavigate();

  const handleClick = () => {
    navigate("/profile/hook", {
      state: {
        id: 1,
        job: "개발자",
      },
    });
  };

  return (
    <main>
      <h1>hook 님의 홈페이지에 오신 것을 환영합니다.</h1>
      <button onClick={handleClick}>hook 님의 프로필 보기</button>
    </main>
  );
}

export default HomePage;

16.3.5 useParams

import { BrowserRouter, Routes, Route } from "react-router-dom";
// ...

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<HomePage />} />
          <Route path="profile/:nickname" element={<Profile />} />
        </Route>
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

import { useParams } from "react-router-dom";

function Profile() {
	// url에서 동적 파라미터 nickname 값을 얻을 수 있습니다.
  const {nickname} = useParams();
  // console.log(useParams());

  return <h2>{nickname}님의 프로필 페이지입니다.</h2>;
}

export default Profile;

16.3.6 장단점

16.4. React Query에서 지원하는 Hook

16.4.1 React Query이란?

16.4.2 React Query 설치방법

npm install @tanstack/react-query

yarn add @tanstack/react-query

16.4.3 React Query 셋팅 및 사용방법

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

16.4.4 useQuery

import { useQuery } from "@tanstack/react-query";
// useQuery가 return 하는 객체에는 이 세가지 말고도 여러 속성값이 있습니다.
const { data, isLoading, error } = useQuery(queryKey, queryFn, options);

1. queryKey: useQuery마다 부여되는 고유 Key 입니다. 단순 문자열을 할 수 있고 배열의 형태로도 사용될 수 있습니다.

2. queryFn: 쿼리가 데이터를 요청하는 데 사용할 함수입니다. fetch나 axios를 사용하여 promise를 반환하는 함수가 와야합니다.

3. options: 생략가능한 인자로 옵션을 추가할 때 사용됩니다. enable, retry 등등 많은 옵션들이 있습니다.

export const fetchPosts = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const data = await res.json();

  return data;
};

import { useQuery } from "@tanstack/react-query";
import { fetchPosts } from "./api.js"

export default function App() {
  const { isLoading, data: posts } = useQuery("posts", fetchPosts);

  return (
    <div>
      {isLoading
        ? "LOADING..."
        : posts.map((post, index) => <div>{`${index}) ${post.title}`}</div>)}
    </div>
  );
}

16.4.4 useMutation

import { useMutation } from "@tanstack/react-query";
// useMutation이 return 하는 객체에는 이 세가지 말고도 여러 속성값이 있습니다.
const { data, isLoading, mutate } = useMutation(mutationFn, options);

1. mutationFn: 데이터를 수정하고 업데이트하고 삭제하는데 사용할 함수입니다. fetch나 axios를 사용하여 promise를 반환하는 함수가 와야합니다.

2. options: useMutation에도 많은 옵션이 있지만 많이 쓰는 4가지 옵션이 있습니다.
• onMutate: Promise 객체를 반환하는 Callback 함수로써 mutation 함수가 실행되기 전에 실행되고 mutation 함수와 동일한 변수가 제공됩니다.
• onError: mutation이 실패한 경우 실행할 Callback 함수 입니다.
• onSettled: mutation이 실패 또는 성공 여부에 관계 없이 실행할 Callback 함수 입니다.
• onSuccess: mutation이 성공한 경우 실행할 Callback 함수 입니다.

// getPosts  함수는 게시물 목록을 가져오는 함수입니다.
export const getPosts = async () => {
  const { data }= await axios.get("http://localhost:8080/post");
  return data;
};

// createPost 함수는 게시물을 생성하는 함수입니다.
export const createPost = async (title, content) => {
	await axios.post("http://localhost:8080/post", {
      title,
      content,
    });
};

import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { getPosts, createPost } from "./api.js"

export default function App() {
	const queryClient = useQueryClient();
	const { isLoading, data: posts } = useQuery("posts", getPosts);
	const createMutate = useMutation(
	    ({ title, content }) => {
	      createPost(title, content);
	    },
	    {
	      onSuccess: () => {
					// 비동기 통신이 성공적으로 이루어 졌을때
					// posts 라는 queryKey를 찾아 데이터를 새로 받아옵니다.
	        queryClient.invalidateQueries("posts"); 
	      },
	    }
	  );

	const handleSubmit = async (e) => {
    e.preventDefault();
    const { title, content } = e.target;
		
		// 위에서 선언한 createMutate의 mutate함수를 사용하여 createPost 함수를 실행시킵니다.
    createMutate.mutate({ title: title.value, content: content.value });
  };

  return (
    <div>
			<form onSubmit={handleSubmit}>
			{...중략}
			</form>
      {isLoading
        ? "LOADING..."
        : posts.map((post, index) => <div>{`${index}) ${post.title}`}</div>)}
    </div>
  );
}

16.5. react-use

16.5.1 react-use란?

💡

react-use

GitHub - streamich/react-use: React Hooks - 👍

React Hooks - 👍. Contribute to streamich/react-use development by creating an account on GitHub.

https://github.com/streamich/react-use#readme

16.5.2 react-use 설치 방법

npm install react-use

yarn add react-use

16.5.3 useUpdateEffect

import { useEffect, useState } from "react";

function App() {
  const [input, setInput] = useState("");

  useEffect(() => {
    console.log(input);
    console.log("첫 마운트 시에 실행됩니다.");
  }, [input]);

  return <input value={input} onChange={(e) => setInput(e.target.value)} />;
}

export default App;

import { useState } from "react";
import { useUpdateEffect } from "react-use";

function App() {
  const [input, setInput] = useState("");

  useUpdateEffect(() => {
    console.log(input);
    console.log("첫 마운트 시에 실행되지 않습니다.");
  }, [input]);

  return <input value={input} onChange={(e) => setInput(e.target.value)} />;
}

export default App;

16.5.4 useDebounce

useDebounce(호출될 함수, 지연 단위, [변화를 감지할 값])

import { useDebounce } from "react-use";

function App() {
  const [input, setInput] = useState("");
  const [isLoading, setIsLoading] = useState(false);

  useDebounce(
    () => {
      setIsLoading(true);
      // API 요청

      // 구현코드
      // ...

      setIsLoading(false);
    },
    1000,
    [input]
  );

  return <input value={input} onChange={(e) => setInput(e.target.value)} />;
}

export default App;

16.5.5 useLocalStorage

const [value, setValue, removeValue] = useLocalStorage("key값", "기본값");

import { useLocalStorage } from "react-use";

const App = () => {
  const [value, setValue, removeValue] = useLocalStorage("키", "기본값");

  return (
    <div>
      <div>
        <h1>Value: {value}</h1>
        <button onClick={() => setValue("포도")}>value를 포도로 변경</button>
        <br></br>
        <button onClick={() => setValue("바나나")}>value를 바나나로 변경</button>
        <br></br>
        <button onClick={() => removeValue()}>LocalStorage의 값을 삭제</button>
        <br></br>
      </div>
    </div>
  );
};

export default App;

16.5.6 useClickAway

useClickAway(ref, fn, ['click']);

import { useClickAway } from "react-use";
import { useRef } from "react";

const App = () => {
  
  const foo = () => {
    console.log("ref의 외부가 클릭되었습니다.");
  };

  const ref = useRef(null);

  useClickAway(ref, foo, ['click']);

  return (
    <div
      ref={ref}
      style={{
        width: 100,
        height: 100,
        background: "pink",
      }}
    />
  );
};

export default App;

useClickAway(ref, () => {
    console.log("ref의 외부요소가 클릭되었습니다.");
  });

import { useState } from "react";

const App = () => {
  const [onModal, setOnModal] = useState("none");

  const Modal = () => {
    onModal ? setOnModal(false) : setOnModal("none");
  };

  return (
    <>
      <button
        style={{
          margin: 20,
        }}
        onClick={Modal}
      >
        모달창을 띄워주세요!
      </button>

      <div
        style={{
          display: onModal,
          position: "absolute",
          top: 10,
          background: "pink",
          width: 200,
        }}
      >
        <p
          style={{
            textAlign: "center",
          }}
        >
          모달창을 닫겠습니까?
        </p>
        <button onClick={Modal} style={{ width: 200 }}>
          예
        </button>
      </div>
    </>
  );
};

export default App;

 

 

import { useClickAway } from "react-use";
import { useRef } from "react";
import { useState } from "react";

const App = () => {
  const ref = useRef(null);
  useClickAway(ref, () => {
    if (onModal === "none") {
      return;
    }
    setOnModal("none");
  });

  const [onModal, setOnModal] = useState("none");

  const Modal = () => {
    onModal ? setOnModal(false) : setOnModal("none");
  };

  return (
    <>
      <button style={{ margin: 20 }} onClick={Modal}>
        모달창을 띄워주세요!
      </button>

      <div
        ref={ref}
        style={{
          display: onModal,
          position: "absolute",
          top: 10,
          background: "pink",
          width: 200,
        }}
      >
        <p
          style={{
            textAlign: "center",
          }}
        >
          모달창을 닫겠습니까?
        </p>
        <button onClick={Modal} style={{ width: 200 }}>
          예
        </button>
      </div>
    </>
  );
};

export default App;

16.6 자신이 만든 커스텀 훅으로 훅 라이브러리 배포하는 방법

npm login

cd src/useTitle

npm init

npm publish

npm i use-document-title-react