- 훅의 호출 타이밍
- 간단한 예제로 알아보자
<!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");
//render start-> render end -> child render start-> end -> useEffect
// render start-> render end -> child render start-> child state -> end ->child useEfect -> useEffect
const Child = () =>{
console.log(" child render start");
const [text,setText] = React.useState(()=>{
console.log(" child useState")
return "";
});
React.useEffect(()=>{
console.log(" Child use effect,no deps")
return () =>{
console.log("Child useEffect [Cleanup] , no deps")
}
})
React.useEffect(()=>{
console.log(" Child use effect, empty deps")
return () =>{
console.log("Child useEffect [Cleanup], empty deps")
}
},[]);
React.useEffect(()=>{
console.log(" Child use effect,text")
return () =>{
console.log("Child useEffect [Cleanup], text")
}
},[text]);
function handleChange(event){
setText(event.target.value);
}
const element = (
<>
<input onChange={handleChange}/>
<p>{text}</p>
</>
)
console.log(" child render end");
return element;
}
const App = () => {
console.log("App render start");
const [show, setShow] = React.useState(()=>{
console.log("app use state");
return false;
});
// start -> state -> end -> effect
//선언 해 놓은 순서대로 호출된다.
//무조건 호출
React.useEffect (()=>{
console.log("app use useEffect,no deps")
//기존 세팅 되어 있던 것을 싹 지우고 다시 셋팅한다.
//클린업
return () =>{
console.log("app useEffect [Cleanup],no deps")
}
})
//처음 한번만 호출
React.useEffect (()=>{
console.log("app use useEffect,empty deps")
return () =>{
console.log("app useEffect [Cleanup],empty deps")
}
},[])
//show에 있는 값이 바꼇을때 호출
React.useEffect (()=>{
console.log("app use useEffect,show")
return () =>{
console.log("app useEffect [Cleanup], show")
}
},[show])
//useState로 만들어진 set함수는 인자로 이전 값이 들어온다.
//setState의 처음값은 이전 값이다.
function handleClick(){
setShow((prev) => !prev);
}
console.log("App render end");
return (
<>
<button onClick={handleClick}>Search</button>
{ show ?(
<Child/>
) : null}
</>
)
}
ReactDOM.render(<App />,rootElement);
</script>
</body>
</html>
-
클린업
기존 세팅 되어 있던 것을 싹 지우고 다시 셋팅한다. -
처음 렌더링
App render-> app use State-> App render end -> app use effect,no deps -> app use effect, empty deps -> app use effect,show -
Search 텍스트 박스 클릭 시
App render start -> App render end -> child render start ->child useState -> child render end -> cihld use effect, no deps -> child use effect, empty dpes -> child use effect, text -> app use effect,no deps -> app use effect, show -
input text 입력 시
child rneder start -> child render end -> cihld use effect, no deps -> child use effect,text -
input text를 닫았을 때
app render start -> app redner end -> app use effect, no deps -> app use effect,show -
클린업 있을 시
useEffect가 일어나기 전에 cleanUp 먼저 일어난다.
위 처럼 console.log를 통해 hooks flow를 알아 보는 것도 좋은 공부가 될 수 있습니다.
풋살을 좋아하는 프론트엔드 개발자