예시코드
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<!-- 바벨 컴파일러 불러오기 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<!-- 바벨이 읽을 수 있게 만들어 준다. -->
<!-- 바벨은 자바스크립트 컴파일러! JSX표현을 자바스크립트가 이해할 수 있는 표현으로 바꾸어준다. -->
<script type="text/babel">
const rootElement = document.getElementById("root");
/* 커스텀 훅 */
function useLocalStorage(itemName, value = "") {
const [state, setState] = React.useState(() => {
return window.localStorage.getItem(itemName) || value;
});
React.useEffect(() => {
window.localStorage.setItem(itemName, state);
}, [state]);
return [state, setState];
}
const App = () => {
const [keyword, setKeyword] = useLocalStorage("keyword");
const [result, setResult] = useLocalStorage("result");
const [typing, setTyping] = useLocalStorage("typing", false);
function handleChange(event) {
setKeyword(event.target.value);
setTyping(true);
}
function handleClick() {
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>
잠실사는 주니어 개발자