[포스코x코딩온] 웹 풀스택 과정 12주차 회고 | React - LifeCycle

 

📌 Life Cycle

리액트의 모든 컴포넌트는 생성-업데이트-제거의 생명주기를 갖는다.
클래스형 컴포넌트는 lifeCycle 메서드를 이용하고, 함수형 컴포넌트는 hook을 이용하여 생명주기 이벤트를 다룰 수 있다.

💡 생성 (Mount)

DOM이 생성되고 웹 브라우저 상에 나타난다.

• constructor: 컴포넌트 생성자 메서드로, 컴포넌트가 생성되면 가장 먼저 실행된다. this.props, this.state에 접근이 가능하다.
• render: 컴포넌트를 렌더링하는 메서드이다.
• componentDidMount: 컴포넌트가 마운트 되었을 때(=생성되었을 때) 호출되는 메서드이다.

💡 업데이트 (Update)

props 또는 state가 바뀌었을 때 업데이트한다.

• componentDidUpdate: 컴포넌트가 업데이트되고 난 후 발생한다.

💡 제거 (Unmount)

컴포넌트가 화면에서 사라진다(제거된다).

• componentWillUnmount: 컴포넌트가 화면에서 사라지기 직전에 호출된다.
  lifecycle
  useeffect
  ref
  other hooks...

💡 useEffect

• 함수형 컴포넌트에서 useEffect()으로 컴포넌트의 lifeCycle에 따른 이벤트를 다룰 수 있다.
• 클래스형 컴포넌트의 componentDidMount, componentDidUpdate가 합쳐진 형태이다.

렌더링 될 때마다 실행

useEffect(() => {});

Mount 될 때만 실행

useEffect(() => {}, []);

특정 값이 바뀔 때만 실행

useEffect(() => {}, [의존성1, 의존성2, ..]);