function example() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`you clicked ${count} times!`)
}, [count]);
return (
<button onClick={() => setCount(count + 1)}>click</button>
)
}
const [myData, setData] = useState([
{ id: "Work", label: "Work", value: 120 },
{ id: "Eat", label: "Eat", value: 35 },
{ id: "Commute", label: "Commute", value: 33 }
])
useEffect( ()=>{
let timer = setTimeout(() => {
let randomTxt = makeid(6)
setData( data=> data.concat({ id: randomTxt, label: randomTxt, value: 15 }))
}, 3000);
return () => clearTimeout(timer) //더이상 setTimeout 구독하지 않게
},[]);
출처: https://lts0606.tistory.com/487
커스텀 훅 예시
import { useState, useCallback } from 'react';
function useInputs(initialForm) {
const [form, setForm] = useState(initialForm);
//form 초기화: 파라미터로 받은 initialForm
// change시키는 함수: input에서 입력받은 name, value를 이전 form의 내용을 포함하여 저장시킴
const onChange = useCallback(e => {
const { name, value } = e.target;
setForm(form => ({ ...form, [name]: value }));
}, []);
//form을 파라미터로 받은 initalForm으로 초기화시키는 함수
const reset = useCallback(() => setForm(initialForm), [initialForm]);
return [form, onChange, reset];
}
export default useInputs;
출처: 벨로퍼트와 함께하는 모던 리액트
https://react.vlpt.us/basic/21-custom-hook.html