lifecycle function

1. 개념
2. 과정 & 메서드
3. 사용방법

개념

모든 React 컴포넌트는 동일한 생명주기를 거친다.

• mount -> update -> unmount
• mount: 처음 화면에 추가 될 때
• update: props나 state가 업데이트 될 때
• unmont: 컴포넌트가 화면에서 제거 될 때
• 생명주기에 따라 처리할 작업을 정해줘야 불필요한 업데이트를 방지할 수 있다.
• Class component: lifecycle 메서드 사용
• Fuction component: Hook 사용
  
  

✅1. 과정 & 메서드 (Class Component 일 경우)

Mounting: 요소들을 DOM에 놓기

• 4개의 호출되는 bult-in 메서드

1. constructor()
2. getDerivedStateFromProps()
3. render()
4. componentDidMount()

• render() 메서드는 필수적으로 호출되고 나머지는 선택적이다.

  constructor()

• 제일 처음에 호출됨

• 컴포넌트 새로 만들 때 마다 생기는 클래스 생성자 메서드

• state 초기화나 초기화할 값들에 사용

  getDerivedStateFromProps()

• 요소들을 돔에 렌더링하기 직전에 호출됨

• 초기 props에 기반한 state 설정
  props에 있는 값을 state에 넣을 때(동기화 시킬 때) 사용

  render()

• 필수적인 메서드로 HTML을 DOM에 출력함(UI 랜더링)

  componentDidMount()

• 컴포넌트가 처음 렌더링 된 후에 호출됨

• API, setTimeout, setInterver 같은 비동기 작업할 때 사용

• setState 호출도 자주 사용됨

Upadating: 컴포넌트가 업데이트 될 때 즉, 컴포넌트의 state나 props에 변화가 있을 때

• 업데이트가 되는 경우
  1. props나 state가 바뀔 때
  2. 부모 컴포넌트가 리렌더링 될 때
  3. this.foreceUpdate로 강제로 렌더링을 트리거 할 때
• 5개의 호출되는 bult-in 메서드

1. getDerivedStateFromProps()
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate()
5. componentDidUpdate()

• render() 메서드는 필수적으로 호출되고 나머지는 선택적이다.

  getDerivedStateFromProps()

• 컴포넌트가 업데이트 될 때 가장 처음 호출되는 메서드

• 초기 props가 변할 때 state에도 변화를 주고 싶은 경우 사용

  shouldComponentUpdate()

• 렌더링을 계속해서 할 것인지 말 것인지 boolean 값으로 return

• default 값은 value

  render()

• 컴포넌트가 업데이트 될 때 새로 변화된 것을 함께 다시 랜더링

  getSnapshotBeforeUpdate()

• 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드

• 업데이트 전 props와 state에 접근 가능한 메서드

• 업데이트 후라도 업데이트 전 값을 확인 가능

• 이 메서드 사용시 componentDidUpdate()을 포함해야함 아니면 에러일으킴

  componentDidUpdate()

• 컴포넌트 변화가 DOM 업데이트 된 후 호출하는 메서드

• 업데이트 된 값 처리할 때 사용

Unmounting: 컴포넌트가 DOM에서 제거될 때

• 1개의 호출되는 bult-in 메서드

1. componentWillUnmount()

   componentWillUnmount()

• 컴포넌트가 DOM에서 제거되기 전에 호출되는 메서드

✅2. 과정 & 메서드 (function Component 일 경우)

react Hook [useEffect]사용

• 컴포넌트가 렌더링 될 때마다 Side Effect 로직을 다루는 hook

1. componentDidMount() 역할

• useEffect의 배열 파라미터가 비었음

• 처음 render 후에 동작

• 초기 api 작업을 해줄 수 있음

  최초 렌더링 이후에 한번만 실행

  useEffect(()=>{
  //여기 실행시키고 싶은 함수
  },[])

  배열을 생략하면 렌더링 할때마다 실행

  useEffect(()=>{
  //여기 실행시키고 싶은 함수
  })

  
  

2. componentDidUpdate() 역할

• state 업데이트되고 render 후에 동작
• 초기 api 작업을 해줄 수 있음
• state가 들어있는 배열에서 하나라도 state가 업데이트 되면 실행 됨
• 여러 state가 업데이트 되는 경우라도 한번만 실행 됨

  useEffect(()=>{
  //여기 실행시키고 싶은 함수
  },[state])

  • 여러 state들을 독립시키고 싶을 경우 useEffect를 더 만들면 됨

3. componentWillUnmount() 역할

• 컴포넌트가 제거되기 전 실행
• useEffect의 return 값에서 실행됨
• state 값이 비었을 때

   useEffect(()=>{
   //여기 실행시키고 싶은 함수
   return () => {
   // 뒷정리 함수 실행
   }
   },[state])

• return에 뒷정리 함수를 둬서 언마운트되기 전이나 업데이트되기 직전에 작업수행 가능
• useEffect 배열이 비었을 경우 마운트 해제될때만
• useEffect 배열에 state값이 있으면 렌더링될 때마다 뒷정리함수가 실행됨

4. 정리

• useEffect(()=>{},[]) => componentDidMount() 역할
• useEffect(()=>{},[state1,state2...]) => componentDidMount() + componentDidUpdate() 역할
• useEffect(()=>{ return (function)},[]) => componentWillUnmount() 역할