useEffect 와 componentDidMount 차이

 

/*class Detail2 extends React.Component(){
  // 자주쓰이는 두개의 훅으로, function에서는 useEffect로 대체됨
  // didMout는 실행시, WillUnMount는 해제시 동작하는 라이프사이클 
  componentDidMount(){}
  componentWillUnMount(){}
}*/

const Detail = (props) => {
  //1.컴퍼넌트로드시 실행(DidMount)
  //2.컴퍼넌트사라질떄 실행(unMount)
  //3.useEffect 훅 여러개 사용가능 (순서대로 사용)

//1.2초후 타이머 실행 되고 alert값 false로 변경(alert만 실행,렌더링될때마다 실행되지x 
//useEffect 뒤 :[실행할 state값]
//console.log('안녕')은 항상렌더링되지 x , alert함수 변경될때만 실행
const Detail = (props) => {
  let [alert, alert변경] = useState(true);
  let [입력값, 입력값변경] = useState("");
  useEffect(() => {
    let 타이머 = setTimeout(() => {
      alert변경(false);
    }, 2000);
    console.log("안녕");
  },[alert]);
  
  /*cf.useEffect 함수 뒤 state값없는 공란일 경우 component 렌더링시 한번만 실행
  	useEffect(()=>{},[])
  */
  [...]