-
DOM : 논리 트리
-
컴포넌트 : 앨리먼트의 집합
-
앨리먼트 : 요소
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@16.7.0/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const [keyword,setkeyword] = React.useState("");
const [result,setResult] = React.useState("");
const [typing,setTyping] = React.useState(false);
function handleChange(event){
setkeyword(event.target.value);
setTyping(true);
}
function handleClick(event){
setTyping(false);
setResult(`We find results of ${keyword}`)
}
return (
<>
<input onChange={handleChange}/>
<button onClick={handleClick}>search</button>
<p>
{typeing ? `Looking for ...${keyword}` : result}
</p>
</>
)
}
ReactDOM.render(<App />,rootElement);
</script>
</body>
</html>
사이드 이펙트
<!DOCTYPE html>
<html lang="en">
<body>
<script
crossorigin
src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"
></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const App = () => {
const [keyword,setkeyword] = React.useState( () =>{
return window.localStorage.getItem("keyword")
});
const [result,setResult] = React.useState("");
const [typing,setTyping] = React.useState(false);
React.useEffect(()=>{
window.localStorage.setItem("keyword", keyword);
},[]);
function handleChange(event){
window.localStorage.setItem("keyword", event.target.value);
setkeyword(event.target.value);
setTyping(true);
}
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>
-
localstorage의 값이 길거나 크면 읽는 데 시간이 든다.
-
react에서는 초기 값을 return하는것으로 보낼 수 있다.
-
안에 있는 값이 바뀌면 이 해당 컴포넌트 다시 한번 불리게 된다.
-
useEffect는 처음으로 한번 실행 된 후 두번째 인자를 비어 준다면 계속 실행되서 useEffect를 쓴 이유가 무의미 하다.
두번째 인자로 keyword를 넣으면 keyword의 값이 변경되면 실행된다.
풋살을 좋아하는 프론트엔드 개발자