Hook 사용예제: useTtile, useConfirm

useTitle

title을 변경하는 기능을 구현하였다.

(5초 뒤에 title이 "Home"으로 변경됨)

...
const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector("title");
    //head에 존재하는 <title> 태그를 말함
    htmlTitle.innerText = title;
  };
  useEffect(updateTitle, [title]);//title의 값이 변경될 때마다 unpdateTitle함수를 호출
  return setTitle;
}

const App = () => {
  const titleUpdater = useTitle("Loading...");
  //title에 초기값으로 "Loading..."을 줌과 동시에 setTitle함수를 return받아옴
  
  setTimeout(()=>titleUpdater("Home"), 5000)
  return(
    <div className="App">
      <div>Hi</div>
    </div>
  )
}

export default App;

before

after

useConfirm

사용자가 어떤 행동을 하기 전에 확인하는 기능을 구현하였다.

useState와 useEffect를 사용하지 않기 때문에 엄밀히 말하자면 hook은 아니다. 그렇지만 hook과 비슷한 기능과 형식을 가지고 있기 때문에 다뤄보았다.

...
const useConfirm = (message = "", onConfirm, onCancel) => {//message의 기본값(초기값)설정
  //함수의 존재를 확인한 다음, 존재한다면 type을 확인한다.
  if(!onConfirm && typeof(onConfirm) !== "function"){
    return;
  }
  if(!onCancel && typeof(onCancel) !== "function"){
    return;
  }
  const confirmAction = () => {
    if(confirm(message)){
      onConfirm();
    }else{onCancel();}
  }
  return confirmAction;
}

const App = () => {
  const deleteWorld = () => console.log("Deleting the world...");
  const abort = () => console.log("Aborted");
  const confirmDelete = useConfirm("Are you sure?", deleteWorld, abort);
  return(
    <div className="App">
      <button onClick={confirmDelete}>Delete the world</button>
    </div>
  )
}

export default App;

+) confirm() 메서드

confirm("이 기능을 수행하시겠습니까?");

위와 같이 confirm()메서드로 생성된 창에서

"확인" 버튼을 누르면 true를 반환하고, "취소" 버튼을 누르면 false를 반환한다.