15. Custom Hook (1)

15.1 커스텀 훅(Custom Hook)이란?

• 여러 함수 컴포넌트에서 공통으로 사용되는 특정 컴포넌트 로직을 분리해 필요한 컴포넌트에서 호출하기 위해 사용합니다. 이를 통해 반복되는 코드를 줄일 수 있습니다.

• 리액트 프로젝트에서 특정 기능을 구현하기 위해 필요에 따라 라이브러리를 도입하기도 합니다. 하지만 원하는 기능을 구현하기에 적합한 라이브러리가 없는 경우 커스텀 훅을 직접 만들어 사용할 수 있습니다.

1. 재사용성
커스텀 훅을 사용하면 여러 함수 컴포넌트에서 중복되는 로직을 공유할 수 있습니다. 즉, 로직의 재사용성이 높습니다.
 

2. 가독성
커스텀 훅을 사용하면 커스텀 훅의 내부 로직을 정확히 몰라도 어떤 값이 들어가서 어떤 결과값이 반환되는지가 명확하다는 장점이 있습니다.
 
fetch를 사용해 비동기 통신을 하는 useFetch 커스텀 훅을 만들었다고 가정해 보겠습니다. useFetch의 정확한 로직을 몰라도 단 한줄의 코드로 useFetch가 서버에 데이터를 요청할 url을 전달받아 비동기 통신 후 받은 응답 데이터, 로딩 상태, 에러를 반환한다는 것을 유추할 수 있습니다.
 

function App() {
  const url = "https://example.com/todos";
  const {data: todos, isLoading, error} = useFetch(url);

  if (error) {
    return <div>{error}가 발생했습니다.</div>;
  }

  if (isLoading) {
    return <div>로딩중입니다..</div>;
  }

  return <TodoList todos={todos} />;
}

export default App;

15.2 커스텀 훅 주의사항

15.2.1 주의사항

1. 최상위(at the Top Level)에서만 Hook을 호출해야 합니다.

2. 오직 React 함수 내에서 Hook을 호출해야 합니다.

3. Hook은 use로 시작해야하는 규칙이 있습니다.

15.2.2 고려사항

1. 커스텀 훅이 꼭 필요한지 확인해봅시다.

1. 커스텀 훅의 이름이 직관적인지 생각해봅시다.

1. 만들어진 커스텀 훅이 순수한지 확인해봅시다.

15.3 커스텀 훅 사용해보기

15.3.1 커스텀 훅 사용방법

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;

1. 커스텀 훅의 이름은 use 로 시작되어야 합니다.
use 로 시작되지 않으면 특정한 함수가 그 안에서 Hook을 호출하는지 알 수 없기 때문입니다.
💡
리액트 공식 홈페이지에서 강조하는 관습으로써 이를 따르지 않으면 특정한 함수가 그 안에서 Hook을 호출하는지를 알 수 없기 때문에 Hook 규칙의 위반 여부를 자동으로 체크할 수 없습니다.
 

2. 커스텀 훅 또한 useState와 useEffect과 같은 내장 훅을 사용할 수 있습니다.
우리는 useFetch 을 직접 호출하기 때문에 리액트 관점에서 컴포넌트는 useState와 useEffect만 호출합니다. 하나의 컴포넌트에서 독립적인 useState와 useEffect를 여러 번 호출할 수 있습니다.
 

3. 같은 커스텀 훅을 사용하는 서로 다른 컴포넌트는 state를 공유하지 않습니다.
커스텀 훅은 상태 관련 로직을 재사용하는 매커니즘이지만 커스텀 훅을 사용할 때마다 그 안의 state와 effect는 완전히 독립적이기 때문에 서로 다른 컴포넌트는 독립된 state를 얻을 수 있습니다.
 

15.3.2 간단한 커스텀 훅 만들어보기

import { useState } from "react";

function App() {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <p>{value}</p>
      <input type="text" onChange={handleChange} />
    </div> 
  );
}

export default App;

import { useState } from "react";

export const useInput = (initialValue) => { 
  const [value, setValue] = useState(initialValue); // --- ⓵
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  return [value, handleChange]; // --- ⓶ 
};

import { useInput } from "./useInput";

function App() {
  const [value, handleChange] = useInput("안녕 라이캣🦁"); // --- ⓵

  return (
    <div>
      <p>{value}</p>
      <input type="text" value={value} onChange={handleChange} /> // --- ⓶
    </div>
  );
}

export default App;

import { useInput } from "./useInput";

function App() {
  const [value, handleChange] = useInput("안녕 라이캣🦁"); 
  const [value2, handleChange2] = useInput(""); // --- ⓵

  return (
    <div>
      <p>{value}</p>
      <input type="text" value={value} onChange={handleChange} /> 
      <p>{value2}</p>
      <input type="text" onChange={handleChange2} /> // --- ⓶ 
    </div>
  );
}

export default App;

15.4 (실습1) useTitle

15.4.1 Document Title

15.4.2 useTitle 적용하기

import { useEffect } from 'react';

const useTitle = (title) => {
  useEffect(() => {
    const prevTitle = document.title;
    document.title = title;

    return () => (document.title = prevTitle);
  }, [title]);
};

export default useTitle;

import useTitle from './useTitle';

function Login() {
  useTitle('Login - React');

  return <div>Login 페이지</div>
}

export default Login;

15.5 (실습2) useClick

15.5.1 useClick Hook 이란?

15.5.2 useClick은 왜 사용할까요?

15.5.3 useClick 적용하기

const useClick = (onClick) => {
  if(typeof onClick !== "function"){
    return;
	}
}

useEffect(()=>{
    if(element.current){
      element.current.addEventListener("click", onClick);
    }
    return () => {
      if (element.current){
        element.current.removeEventListener("click", onClick);
      }
    }
  }, [])

import { useEffect } from 'react';
import { useRef } from 'react';

const useClick = (onClick) => {
  if(typeof onClick !== "function"){
    return;
  }

  const element = useRef();

  useEffect(()=>{
    if(element.current){
      element.current.addEventListener("click", onClick);
    }
    return () => {
      if (element.current){
        element.current.removeEventListener("click", onClick);
      }
    }
  }, [])
  return element;
}

export default useClick

import React from 'react'
import useClick from './useClick';

function App() {
  const repeatedFunction = () => console.log("say hello");
  const title = useClick(repeatedFunction);

  return (
    <div>
      <h1 ref={title}>Hi</h1>
    </div>
  )
}

export default App

15.6 (실습3) useToggle

15.6.1 useToggle Hook이란?

import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggleValue = () => { setValue(!value) };

  return [value, toggleValue];
};

export default useToggle;

15.6.2 useToggle 적용하기

import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);
}

import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggleValue = () => { setValue(!value) };

  return [value, toggleValue];
};

import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggleValue = () => { setValue(!value) };

  return [value, toggleValue];
};

export default useToggle;

import useToggle from "./useToggle";

function App() {
  const [isChecked, setIsChecked] = useToggle();
  const [isListOpen, setListOpen] = useToggle();

return;
}

export default App;

15.6.3 (예제 1) useToggle Hook을 활용하여 체크박스 만들기

function App() {
  const [isChecked, setIsChecked] = useToggle();

return (
<>
	<h3>음료를 주문하시겠어요? 🥤</h3>
  <label for='check'>
    <input
      type='checkbox'
      id='check'
      onChange={setIsChecked}
    />
    {isChecked ? "네" : "아니요"}
  </label>
</>
	);
}

15.6.4 (예제 2) useToggle Hook을 활용하여 리스트 출력하기

function App() {
  const [isListOpen, setListOpen] = useToggle();

return (
  <div>
    <h3>오늘의 추천 음료를 확인해주세요 🥤</h3>
    <button onClick={setListOpen}>오늘의 추천 음료 확인하기</button>
    {isListOpen && (
      <ul>
        <li>달콤한 라이캣프라푸치노</li>
        <li>맛있는 개리쉐이크</li>
        <li>스파클링 웨이드에이드</li>
        <li>상큼한 빙키주스</li>
      </ul>
    )}
  </div>
  );
}

import useToggle from "./useToggle";

function App() {
  const [isChecked, setIsChecked] = useToggle();
  const [isListOpen, setListOpen] = useToggle();

return (
<>
	<h3>음료를 주문하시겠어요? 🥤</h3>
  <label for='check'>
    <input
      type='checkbox'
      id='check'
      onChange={setIsChecked}
    />
    {isChecked ? "네" : "아니요"}
  </label>

  <div>
    <h3>오늘의 추천 음료를 확인해주세요 🥤</h3>
    <button onClick={setListOpen}>오늘의 추천 음료 확인하기</button>
    {listOpen && (
      <ul>
				<li>달콤한 라이캣프라푸치노</li>
        <li>맛있는 개리쉐이크</li>
        <li>스파클링 웨이드에이드</li>
        <li>상큼한 빙키주스</li>
      </ul>
    )}
  </div>

</>
  );
}
export default App;

import { useState } from "react";

const useToggle = (initialValue = false) => {
  const [value, setValue] = useState(initialValue);

  const toggleValue = () => { setValue(!value) };

  return [value, toggleValue];
};

export default useToggle;

15.7 useAxios

1. get : 데이터를 조회할 때 사용합니다.

2. post : 새로운 데이터를 추가할 때 사용합니다.

3. put : 기존의 데이터를 수정할 때 사용합니다.

4. delete : 기존의 데이터를 삭제할 때 사용합니다.

axios.post(`https://jsonplaceholder.typicode.com/posts`, {
      headers: { 
        accept: '*/*'
      },
      data: {  
          userId: 1,
          id: 19392,
          title: 'title',
          body: 'Sample text',
      },
  })

axios(`https://jsonplaceholder.typicode.com/posts`, {
      method: 'POST',
      headers: { 
        accept: '*/*'
      },
      data: {  
          userId: 1,
          id: 19392,
          title: 'title',
          body: 'Sample text',
      },
  })

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

function App() {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);

  const fetchData = async () => {
    try {
      const res = await axios({
        method: "get",
        url: "https://jsonplaceholder.typicode.com/posts",
      });
      console.log(res);
      setResponse(res.data);
    } catch (error) {
      setError(error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div className="app">
      {loading ? (
        <div>Loading...</div>
      ) : (
        <>
          <h3>게시글 목록</h3>
          <ul>
            {response &&
              response.map((res, index) => (
                <li key={index}>
                  <h4>
                    제목 :{error && error.message}
                    {res && res.title}
                  </h4>
                  <p>{res.body}</p>
                </li>
              ))}
          </ul>
        </>
      )}
    </div>
  );
}

export default App;

• useAxios 컴포넌트

import { useState, useEffect } from 'react';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';

function useAxios(params) {
    const [response, setResponse] = useState(null);
    const [error, setError] = useState('');
    const [loading, setLoading] = useState(true);

    const fetchData = async (params) => {
        try{
            const res = await axios(params);
            setResponse(res.data);
            }catch(err) {
                setError(err);
            }
            finally{
                setLoading(false);
            };
    };

    useEffect(() => {
        fetchData(params);
    }, []);

    return { response, error, loading };
};

export default useAxios;

• useAxios를 활용하여 바꾸어준 예제

import useAxios from './useAxios';

function App() {
  const { response, error, loading } = useAxios({
    method: 'GET',
    url: '/posts',
  });
//  {url, method, body, headers}로 구성된 객체를 생성하고 useAxios 에 인수를 전달하여 HTTP 호출을 수행합니다.

  return (
    <div className="app">
      {loading ? (
        <div>Loading...</div>
      ) : (
        <>
          <h1>게시글 목록</h1>
          <ul>
            {response && response.map(
              (res, index) => 
                <li key={index}>
                  <h1> 제목 : 
                    {error && error.message}
                    {res && res.title}
                  </h1>
                  <p>{res.body}</p>
                </li>
              
            )}    
          </ul>
        </>
        
      )}
    </div>
  );
};

export default App;