React Life Cycle

class 컴포넌트의 life cycle

• Mount
  • 컴포넌트가 처음 실행될 때
  • componentWillMount 호출 -> render로 DOM에 컴포넌트 부착 후 Mount가 완료되면 componentDidMount 호출
    • componentWillMount에서는 props나 state를 변경하면 안된다.
    • componentDidMount에서 DOM에 접근 가능(setTimeout 등)

함수 컴포넌트의 life cycle

• useEffect
• 데이터의 개수에 따라 여러번 사용

          // state가 변경 될 때마다 실행 
          useEffect(() => {
                  // something
                  }, [// state]);

          // 마운트 될 때 처음 한번만 실행        
          useEffect(() => { 
                  // something 
                  }, []);

          // 컴포넌트가 리랜더링 될 때 마다 실행 (데이터에 상관없이 리랜더링)
          useEffect(() => { 
                  // something 
                  });

참고자료

• class 컴포넌트의 life cycle : https://www.zerocho.com/category/React/post/579b5ec26958781500ed9955
• 함수 컴포넌트의 life cycle : https://www.zerocho.com/category/React/post/5f9a6ef507be1d0004347305
• useEffect : https://www.notion.so/Effect-Hook-useEffect-cb3ffb60159948fc95c98336b73ea25d