functional component에서도 state를 사용할 수 있다!
- useState(initialState)
- useEffect(callbackFunc, deps)
- useRef()
- useInput(initial, validator?)
- useTabs(initial, tabs)
- useTitle(initial)
- useClick(onClick)
- useHover(onHover)
- useConfirm(message, onConfirm, onCancel?)
- usePreventLeave()
- useBeforeLeave(onLeave)
- useFadeIn({ duration?, timingFunction?, delay? })
- useNetwork(omChange)
- useScroll()
- useFullscreen()
- useNotification
- useAxios(url, axiosInstance?)
import { useState } from "react";
const [value, setValue] = useState(0);value는 state이고, 이를 변경하기 위해선 반드시 setValue 함수를 통해야 한다.
import { useEffect } from "react";
function foo() {
console.log("Component did mount!");
}
useEffect(foo);componentDidMount와 같은 역할을 한다. deps를 추가하여 해당 state가 변할 때만 componentDidUpdate가 실행될 수 있도록 한다.
import { useState, useEffect } from "react";
const [value, setValue] = useState(0);
function foo() {
console.log("Component did mount!");
console.log("Component did update!");
}
useEffect(foo, [value]);
setValue(1); // state update!deps를 비워두면 componentDidMount만 실행된다.
useEffect(() => {
console.log("Component did mount!");
}, []);함수를 return하면 그 함수는 componentWillUnmount와 동일한 역할을 한다.
useEffect(() => {
return () => {
console.log("Component will unmount!");
}
});import { useRef } from "react";
const inputRef = useRef();
setTimeout(() => inputRef.current.focus(), 5000);
<input ref={inputRef} />inputRef.current가 input 태그를 참조하고 있다. 위 코드는 5초 후 input 태그를 포커싱한다.
function App() {
const name = useInput("");
return (
<div className="App">
<input placeholder="Name" {...name} />
</div>
);
}{...name}은 value={name.value} onChange={name.onChange}와 같다.
2번째 인자는 validator를 추가하여 유효한 값만 입력되도록 설정할 수 있다.
const content = [
{
tab: "Section 1",
content: "Content of the section 1",
},
{
tab: "Section 2",
content: "Content of the section 2",
},
];
function App() {
const tabs = useTabs(0, content);
return (
<div className="App">
{content.map((section, index) => (
<button key={index} onClick={() => tabs.changeContent(index)}>
{section.tab}
</button>
))}
<div>{tabs.content.content}</div>
</div>
);
}hook을 이용해 간편하게 tab을 구현하였다.
function App() {
const updateTitle = useTitle("Loading...");
useEffect(() => {
async function foo() {
const { title } = await bar();
updateTitle(title);
}
foo();
}, [...]);
}비동기 작업에 따라 title이 변경될 필요가 있을 때 사용할 수 있다.
function App() {
const title = useClick(() => {
console.log("Title clicked!");
});
return (
<div className="App">
<h1 ref={title}>Hello</h1>
</div>
);
}h1 태그가 선택되면 useClick의 콜백함수가 실행된다.
function App() {
const title = useHover(() => {
console.log("Mouse hovered!");
});
return (
<div className="App">
<h1 ref={title}>Hello</h1>
</div>
);
}h1 태그에 마우스가 올라가면 useHover의 콜백함수가 실행된다.
function App() {
const confirmAction = useConfirm("Are you sure?", () => {
console.log("Deleting the world...");
});
return (
<div className="App">
<button onClick={confirmAction}>Delete the world?</button>
</div>
);
}browser에서 confirm 여부를 확인하고 onConfirm 혹은 onCancel 함수를 실행한다.
reference(beforeunload)
function App() {
const { enablePrevent, disablePrevent } = usePreventLeave();
return (
<div className="App">
<button onClick={enablePrevent}>Protected</button>
<button onClick={disablePrevent}>Unprotected</button>
</div>
);
}Protected 버튼을 클릭하면 페이지를 나가거나 새로고침할 때 여부를 재차 확인한다. Unprotected 버튼을 클릭하면 여부 확인을 취소한다.
function App() {
useBeforeLeave(() => console.log("mouse leave..."));
return (
<div className="App">
<h1>Hello</h1>
</div>
);
}마우스가 브라우저를 벗어날 때 발생하는 이벤트를 추가할 수 있다.
function App() {
const h1FadeIn = useFadeIn({ duration: 1.5, timingFunction: "ease-in-out" });
const pFadeIn = useFadeIn({ delay: 1, duration: 2 });
return (
<div className="App">
<h1 {...h1FadeIn}>Hello</h1>
<p {...pFadeIn}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam de isto
magna dissensio est. Sed quae tandem ista ratio est? Si verbum sequimur,
</p>
</div>
);
}useFadeIn은 { duration = 1, timingFunction = "ease", delay = 0 }을 기본 매개변수로 가진다.
변경하고자 하는 속성을 인자에서 설정하면 된다.
function App() {
const status = useNetwork((online) => {
if (online) {
// ...stuff to do while online.
} else {
// ...stuff to do while offline.
}
});
return (
<div className="App">
<h1>{status ? "Online" : "Offline"}</h1>
</div>
);
}인터넷 연결 여부를 확인하여, 연결되었을 경우 true, 연결되지 않았을 경우 false로 설정된다. 인터넷 연결이 끊기거나 연결될 때 콜백함수를 실행하거나 status를 얻을 수 있다.
function App() {
const { scrollY } = useScroll();
return (
<div className="App" style={{ height: "1000vh" }}>
<h1 style={{ position: "fixed", color: scrollY > 500 && "red" }}>
Hello
</h1>
</div>
);
}scrollY가 500 이상일 때 스타일이 변경된다.
function App() {
const { ref, enterFullscreen } = useFullscreen((fullscreenElement) => {
console.log(fullscreenElement ? "Entered fullscreen mode!" : "Exited fullscreen mode!");
});
return (
<div className="App">
<img
src="https://picsum.photos/800/600"
alt="picsum"
ref={ref}
onClick={enterFullscreen}
/>
</div>
);
}이미지를 클릭하면 전체화면으로 전환된다. 전체화면을 나가기 위해 esc를 누르거나 exitFullscreen 함수를 useFullscreen()으로부터 얻어 호출해야 한다. 인자에 callback 함수를 추가하여 전체화면에 진입하고 나올 때 동작을 정의할 수 있다.
function App() {
const notify = useNotification("Alert", { body: "This is alert." });
return (
<div className="App">
<button onClick={notify}>Notification</button>
</div>
);
}button을 클릭하면 알림이 전송된다. 브라우저의 Notification이 Allow여야만 한다.
function App() {
const [{ loading, data, error }, refetch] = useAxios(
"https://yts-proxy.now.sh/list_movies.json"
);
return (
<div className="App">
<h2>{data?.status} {data?.statusText}</h2>
<h4>{loading && "Loading..."}</h4>
{console.log(data)}
{error && console.error(error)}
<button onClick={refetch}>Refetch</button>
</div>
);
}axios 요청을 수행하여 loading, data, error 상태 관리를 한다. refetch 함수를 통해 재요청을 할 수 있다.
원하는 http 요청을 위해 axiosInstance를 별도로 포함할 수 있다.