lifecycle & useEffect

lifecycle

리액트 컴포넌트에는 생명주기가 있다.
lifecycle은 컴포넌트가 실행 - 업데이트 - 제거 될 때 각 단계에 맞춰서 발생하는 특정한 이벤트들을 말한다.

이러한 생명주기 함수를 이용해서 컴포넌트가 실행될 때 서버에서 데이터를 받아오고 - 셋팅 - 컴포넌트가 사라질 때 이벤트 리스너에 등록된 이벤트를 알아야 한다.

[lifecycle의 종류]

• mount
  • constructor: 컴포넌트가 생성될 때 실행한다. 이벤트 바인딩을 구현하거나 state를 초기화 하는 용도로 주로 사용된다.
  • getDerivedStateFromProps: props가 바뀔 때 발생한다. props를 통해서 state값을 구성하는 경우에 주로 사용한다.
  • render: 컴포넌트에 전달된 props와 state를 읽어서 jsx를 반환하는 함수이다. 이곳에 다른 컴포넌트들이 있다면 해당 컴포넌트들의 lifeCycle이 시작된다.
  • componenetDidMount: 모든 요소들이 DOM에 render되면 발생하는 이벤트이다. DOM요소가 준비된 상태에서 데이터를 입력하기 때문에 대부분의 통신은 여기서 이루어진다.
• update
  • getDerivedStateFromProps: 컴포넌트가 update 될 때 다시 발생한다.
  • shouldComponentUpdate: 컴포넌트가 update되었을 때 re-render를 할지 결정하는 lifecycle이다.

  shouldComponentUpdate() {
    console.log('Lifecycle Update shouldComponentUpdate')
    return true
  }

  • render: 렌더링이 일어난다.
  • compoenentDidUpdate: 리렌더링 완료 후 발생하는 lifecycle이다.
• unmount
  - componentWillUnmount: 컴포넌트가 종료될 때 실행되는 lifecycle 입니다. event-listener를 없애거나, subscription들을 정리하는 로직이 구현되는곳

---

useEffect

그렇다면 함수 컴포넌트에선 lifecycle을 어떻게 접근해야할까?
이 때 사용가능한 것은 useEffect이다.
useEffect는 componentDidMount, componentDidUpdate, componentWillUnmount 를 합친것과 비슷한 역할을 한다.

[useEffect의 구조]

import React, { useEffect, useState }
from 'react' useEffect(callback, [dependency variable)

• callback함수

  • class컴포넌트의 componentDidMount + compoenentDidUpdate와 비슷한 역할이다.
  • 초기 값을 셋팅할 수 있고 컴포넌트가 re-render되면 callback함수 로직이 다시 실행된다.

• callback의 return

  • 콜백함수는 return할 수 있다. 이 return은 함수 형태인데 이것을 cleanup함수라고 부른다.
  • 클린 업 함수는 class 컴포넌트의 componentWillUnmount와 비슷한 역할을 한다.
  • 컴포넌트가 종료되면서 정리되어야 할 로직들을 구현한다.

• dependency variable (deps)

  • 두번째 매개변수로는 variable을 array형태로 받는다.
  • 매개변수로 받는 값들은 의존성 배열이라고 한다.
  • 이 의존값의 변화가 일어날 때매다 useEffect함수가 실행된다.
  • 배열에 없는 값들의 변화가 일어날 경우에는 useEffect함수가 실행되지 않는다.

---

[useEffect 사용하기]

[처음 렌더링 됐을 때만]

 useEffect(() => {
      // lifecycle didmount / update
      pushSchedule()
  }, [])

• 두번째 매개변수가 빈 배열일 경우엔 useEffect가 처음 한번만 실행된다.
• pushSchedule함수가 호출된 타이밍은 렌더링 결과가 실제 DOM에 반영된 직후이다.
• 그리고 컴포넌트가 사라지기 직전에도 마지막으로 호출된다.

[특정 값 변경 시에만]

 useEffect(() => {
      // lifecycle didmount / update
      pushSchedule()
  }, [count])

• 의존성 배열인 count의 상태가 변경됐을 때만 useEffect 함수가 동작한다.
• 단, update가 됐을 때 무한루프를 조심해야 한다.

[종료시킬 때]

useEffect(() => {
  console.log("useEffect!!", count);

  return () => {
    // clean up
    console.log("cleanup!!", count);
  }
}, [count]);

• 콜백 함수안에서 return을 시키고 useEffect의 콜백함수를 종료 시킨다.

---

[useEffect 사용 예문]

//첫 렌더링 시
import React, { useEffect, useState } from 'react'

function Ex7UseEffect() {

  const [count, setCount] = useState(0)
  const [name, setName] = useState('')

  useEffect(() => {
    console.log('useEffect - Updating document title')
  }, [])

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => setCount(count + 1)}>Click {count} times</button>
    </div>
  )
}

export default Ex7UseEffect

• 상태값이 변경되고 나서 다시 호출된다.
• 하지만 매번 변경이 일어날 때마다 불필요하게 함수가 호출된다.
• 즉 원하지 않는 상황에서도 호출되는 불필요한 실행이 계속 된다.
• 이럴 경우에는 두번째 매개변수를 넣는다.

import React, { useEffect, useState } from 'react'

function Ex7UseEffect() {

  const [count, setCount] = useState(0)
  const [name, setName] = useState('')

  useEffect(() => {
    // after render
    console.log('useEffect - Updating document title')
    document.title = `You clicked ${count} times`
  }, [count, name])


  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={() => setCount(count + 1)}>Click {count} times</button>
    </div>
  )
}

export default Ex7UseEffect

• 해당 배열에 입력된 값만 변경됐을 때 useEffect함수가 실행된다.