728x90
노마드 코드의 무료 강의 웹사이트는 아래 주소로 가면 된다.
다음은 useEffect를 이용한 Hooks인 useTitle이다.
[예제 코드]
import { StrictMode, useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";
const useTitle = (initialTitle) => {
const [title, setTitle] = useState(initialTitle);
const updateTitle = () => {
const htmlTitle = document.querySelector("title");
htmlTitle.innerText = title;
};
useEffect(updateTitle, [title]);
return setTitle;
};
const App = () => {
const titleUpdater = useTitle("Loading...");
setTimeout(() => titleUpdater("Home"), 5000);
return (
<div className="App">
<div>Hi</div>
</div>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
728x90
[강의 설명]
useTitle은 useEffect를 이용한 커스터마이즈된 훅스이다. useState를 통해 initialTitle이라는 초기값을 설정해준다.
updateTitle에서 설정한 title은 html에서 <head>부분에 있는 <title>값을 말하는 것이다.
useEffect가 mount가 되면 htmlTitle이 Loading이 된다.
그리고 titleUpdater이 어딘가에서 불려지게 되면 title이 바뀌게된다.
useEffect(updateTitle, [title]); 이 부분에서 dependency가 title이기 때문에 title이 변화하면 updateTitle 기능이 다시 불려지게 되고 그로인해 title이 바뀌게된다.
이때 timeout을 설정해주면 5초 후에 titleUpdate가 호출되어 useTitle을 호출하고 useState로 인해 setTitle이 설정되서 title값이 변화하게되어 useEffect에 담겨있는 updateTitle 기능이 실행되게 되는 것이다.
728x90
'끄적끄적 > 리액트 공부 - 노마드 코더' 카테고리의 다른 글
| [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - usePreventLeave (0) | 2021.04.29 |
|---|---|
| [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useBeforeLeave (0) | 2021.04.29 |
| [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useClick (0) | 2021.04.28 |
| [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useEffect (0) | 2021.04.28 |
| [리액트 공부] 노마드 코더, 실전형 리액트 Hooks 10개 - useConfirm (0) | 2021.04.28 |
댓글