<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
function useLocalStorage(itemName, value = "") {
// state는 동적인 값이다.
const [state, setState] = React.useState(() => {
return window.localStorage.getItem(itemName) || value;
});
console.log("useEffect execute before :" + [state, setState]);
// state값이 변결 할 때마다 실행
React.useEffect(() => {
console.log("useEffect execute");
console.log(state);
window.localStorage.setItem(itemName, state);
}, [state]);
return [state, setState];
}
// App component
const App = () => {
//setXXX는 useLocalStorage와 싱크되어있다.
const [keyword, setKeyword] = useLocalStorage("keyword");
const [result, setResult] = useLocalStorage("result");
const [typing, setTyping] = useLocalStorage("typing", false);
function handleChange(event) {
setKeyword(event.target.value); //keyword값이 갱신
setTyping(true); //typing값이 갱신
}
function handleClick(event) {
setTyping(false);
setResult(`We find results of ${keyword}`);
}
return (
<>
<input onChange={handleChange} value={keyword} />
<button onClick={handleClick}>search</button>
<p>{typing ? `Looking for ${keyword}` : result}</p>
</>
);
};
ReactDOM.render(<App />, rootElement);
</script>
</body>
</html>