1. Lifecycle - class 컴포넌트

• 컴포넌트는 1. 생성 2. 삭제 3. 관련된 state가 변경되면 재렌더링(업데이트)가 일어날 수도 이를 Lifecycle이라고 부른다.

• 컴포넌트의 인생 중간중간에 참견할 수 있는데 이를 Lifecycle Hook이라고 부른다.

  • Lifecycle Hook은 원래 class로 만든 컴포넌트에서 사용가능 하다.

    class Detail2 extends React.Component {
      componentDidMount(){
    		//Detail2 컴포넌트가 Mount 되고나서 실행할 코드
      }
      componentWillUnmount(){
    		//Detail2 컴포넌트가 Unmount 되기전에 실행할 코드
      }
    }
    

    • componentDidMount() : 컴포넌트 첫 등장 후 실행할 코드
    • componentWillUnmount() : 다른페이지로 넘어간다든지 등의 사유로 컴포넌트가 사라지기 전 실행할 코드

2. useEffect Hook - function 컴포넌트

• Lifecycle Hook 은 함수가 너무 길다는 단점이 있어 useEffect() 를 사용한다.

  • useEffect()는 여러개를 사용할 수 있다. (순서대로 순차 재생된다.)

• 사용 방법

  1. 페이지 상단에서 useEffect를 import한다.
  2. useEffect()를 사용한다.
     • function 컴포넌트 안에 return 전에 넣어준다.
  3. 콜백함수를 넣는다.
     • Detail 컴포넌트가 첫 등장하고나서 실행하고싶은 코드가 있으면 적어준다.
       • useEffect() 의 실행조건은 다음과 같다
         1. 컴포넌트가 첫 등장해서 로딩이 끝난 후에 (전문용어로 mount 끝났을 때)
         2. 컴포넌트가 재렌더링 되고난 후 때 (전문용어로 update 되고난 후에)
  4. return() 을 적어준다.
     • return() 에 적은 함수는 컴포넌트가 사라질 때 실행된다.
       • 함수: 미리 만든 함수명을 입력하거나 arrow function 사용 가능

  import React, {useState, useEffect} from 'react';
  
  function Detail(){
  
    useEffect(()=>{
  		
    });
  
    return (
    )
  }
  

• 업데이트시에는 useEffect()를 실행하지 않는 방법

  • useEffect() 함수 끝부분에 대괄호[] 를 넣어 준다.

    • 대괄호 : 실행 조건을 달아주는 것이다.

      • ex) alert state가 변경될 때만 업데이트로 간주하여 useEffect()를 실행한다.

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

  • 따라서 빈 대괄호를 넣어주면 조건이 없는 것이기 때문에 조건을 영원히 만족시킬 수 없어 업데이트가 성립되지 않는다. 컴포넌트가 로딩될 때 처음에 한번만 실행됩니다.

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

3. 응용 - 콜백함수와 useEffect 결합

ex) Detail 페이지 방문 2초 후에 alert 알림창이 사라지게 하기

1. setTimeout 함수

   function Detail(){
   
     let [ alert, alert변경 ] = useState(true);
     useEffect(()=>{
       let 타이머 = setTimeout(()=>{ alert변경(false) }, 2000);
     });
   
     return (
       <HTML많은곳/>
       {
         alert === true
         ? (<div className="my-alert2">
             <p>재고가 얼마 남지 않았습니다</p>
           </div>)
         : null
       }
     )
   }
   

   • useEffect 안에 setTimeout() 함수를 추가하여 2초후에 alert 라는 state를 false로 변경한다.

2. UI 보이는 여부를 state로 저장해두고, 삼항연산자로 컨트롤 한다.

   function Detail() {
   
     let [ alert, alert변경 ] = useState(true);
   
     useEffect(() => {
   
     });
     return (
    
       {
         alert === true
         ? (<div className="my-alert2">
             <p>재고가 얼마 남지 않았습니다</p>
         </div>)
        : null
       }
     )
   }
   

3. setTimeout 타이머를 해제 한다.

   • ex) Detail 방문시 2초 후에 UI가 사라지도록 코드를 짰는데, 2초가 되기 전에 Detail을 벗어나면 코드가 꼬인다.

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

• useEffect안에는 return 함수를 추가하면 컴포넌트가 사라질 때 특정 코드를 실행한다.
• 따라서 clearTimeout(타이머이름) 을 추가하여 버그를 방지하며 타이머 해제를 한다.