노마드코더 - 실전형 리액트 Hooks - useEffect

크롱·2024년 1월 9일

React 인강

목록 보기

7/7

useTitle

https://stackblitz.com/edit/stackblitz-starters-rbdwkb?file=src%2FApp.js

Loading... -> Home 으로 바뀌게하는 hooks

import React, { useState, useEffect } from 'react';
import './style.css';

const useTitle = (initialTitle) => {
  const [title, setTitle] = useState(initialTitle);
  const updateTitle = () => {
    const htmlTitle = document.querySelector('h1'); //h1 선택
    htmlTitle.innerText = title; //h1의 내부txt를 title로
  };
  useEffect(updateTitle, [title]); //title이 바뀌면 실행
  return setTitle;
};

export default function App() {
  const titleUpdater = useTitle('Loading...'); //setTitle을 반환.
  //titleUpadater는 setTitle임.
  setTimeout(() => titleUpdater('home'), 2000);
  return (
    <div>
      <h1></h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

useTitle 훅은 title을 변경시키는 setTitle을 반환한다.
const titleUpdater = useTitle('Loading...')에 의해 h1 초기값은 Loading

setTimeout(() => titleUpdater('home'), 2000);
titleUpdater('home')은 setTitle('home')과 같은 기능이다.
그래서 title이 바뀌면서 useEffect(updateTitle, [title])이 실행됨.

useConfirm

useConfirm 훅은 message,callback, rejection 을 인자로 받아, confirm alert를 받은 후 확인/취소의 경우에 따라 callback/rejection의 함수를 실행합니다.

https://stackblitz-starters-ruxijx.stackblitz.io

import React from 'react';
import './style.css';

const useConfirm = (message = '', callback, rejection) => {
  if (typeof callback !== 'function') {
    return;
  }
  const confirmAction = () => {
    if (confirm(message)) {//확인 누를시
      callback();
    } else {
      rejection();
    }
  };
  return confirmAction;
};

export default function App() {
  const deleteWorld = () => console.log('삭제중.....');
  const cancel = () => console.log('안지운다~');
  const confirmDelete = useConfirm('진짜로 삭제할거에요?', deleteWorld, cancel);
  return (
    <div>
      <h1>Hello StackBlitz!</h1>
      <button onClick={confirmDelete}>삭제해보자</button>
    </div>
  );
}