리액트 컴포넌트의 Lifecycle 훅

let [alert, alert변경] = useState(true);
let [inputData, inputData변경] = useState('');
  useEffect(() => {
    let 타이머 = setTimeout(() => {
      alert변경(false)
    }, 2000);
  }, [alert]);​

class Detail2 extends React.Component {
  componentDidMout(){

  }
  componentWillUnmount(){
    
  }
}

 

• useEffect 사용법

/*Detail function 안에*/
useEffect(()=>{
    
});

컴포넌트가 mount되었을 때,

컴포넌트가 update 될 때 

특정 코드를 실행할 수 있다.

 

1. Detail 페이지에 진입후 alert 창이 2초 후에 사라지게 하기

2. 컴포넌트가 사라질 때 코드를 실행시키기

useEffect(()=>{
    return function 함수(){실행할 코드}
});

//혹은 arrow function 사용 
return ()=>{실행할 코드}

3. useEffect는 여러개 사용 가능. 적은 순서대로 실행됨

 

4. useEffect훅은 특정 state가 변경될 때만 실행해야 된다.

useEffect는 업데이트될 때 항상 실행된다.

let [alert, alert변경] = useState(true);
let [inputData, inputData변경] = useState('');
useEffect(() => {
    let 타이머 = setTimeout(() => {
      alert변경(false)
    }, 2000);
  }, [alert]);

input에 무언가를 입력할 때마다 재랜더링이 일어난다. 이에 따라 같은 페이지가 업데이트 되므로 같은 타이머 설정한

useEffect계속 실행된다. 

이를 방지하기 위해 콤마찍고, 대괄호 안에[] alert라는 상태명을 입력한다. 

복수의 state도 콤마 찍으며 [state1, state2] 가능

 

• []가 빈칸이면 Detail 업데이트 시 useEffect가 처음 한번만 실행된다.

 

• setTimeout쓸 때 버그가 일어날 수 도 있다. 

이를 방지하기 위해 return 해서 Detail이 사라질 때 타이머를 제거한다.

useEffect(() => {
    let 타이머 = setTimeout(() => {
      alert변경(false)
    }, 2000);
    return ()=>{ clearTimeout(타이머) }
  }, []);