[React] useEffect, cleanup

▷ useEffect

• 컴포넌트 실행 최초 1회만 랜더링
• 의존성 배열을 활용하여 해당 배열의 상태가 변경될 때만 useEffect의 콜백 함수가 실행되도록 설정할 수 있다
• 의존성 배열에 포함되지 않은 상태의 변경은 useEffect를 통한 동작을 트리거하지 않으므로, 해당 상태의 변경에 따른 불필요한 리랜더링을 방지할 수 있다
• 따라서 useEffect를 사용하면 상태 변경에 따른 리랜더링을 제어하고 최적화할 수 있다

 

 useEffect(setup, dependencies?)
 useEffect(실행하고자하는 코드, 변수나 상태가 변화할때 react.js가 코드를 실행시켜야하는 것)

 

import Button from "./Button"
import styles from "./App.module.css"
import { useState, useEffect } from "react";

function App(){
  const [counter, setValue] = useState(0)
  const [keyword, setKeyword] = useState('')
  // keyword는 setKeyword함수에 의해 변화되고
  // setKeyword함수는 onChange라는 함수에 의해 호출되고
  // onChange는 사용자 input이 변화할 때 호출된다!
  const onClick = () => setValue((prev) => prev + 1)
  const onChange = (event) => setKeyword(event.target.value)

  // useEffect없이 실행하면 매번 전체 컴포넌트가 재랜더링 되면서 성능저하를 야기
  console.log('I run all the time')
  
  // 최초 1회 실행
  useEffect(() => {
    console.log('call the Api')
  }, [])
  
  // keyword 상태가 변화할 때 실행 & 첫 새로고침 때 실행
  useEffect(() => {
    if (keyword !== '' && keyword.length > 5){
       console.log('Search For', keyword)
    }
  }, [keyword])
  
  // counter 상태가 변화할 때 실행 & 첫 새로고침 때 실행
  useEffect(() => {
      console.log('I run when "counter" changes')
    
  }, [counter])
  
  // counter, keyword 둘 중 하나라도 변화할 때 실행 & 첫 새로고침 때 실행
  useEffect(() => {
    console.log('I run when keyword & counter change')
  }, [keyword, counter])
  
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  )
}
export default App;

 

 

▷ useEffect vs React.memo

useEffect	React.memo
컴포넌트의 랜더링 이후에 실행 주로, 상태나 변수의 변화에 따른 추가적인 동작을 처리한다.	컴포넌트의 랜더링을 최적화하는데 사용된다. 이전의 랜더링 결과를 기억해두었다가, 동일한 입력값(프로퍼티)이 주어졌을 때 이전에 랜더링한 결과를 재사용한다.
컴포넌트의 성능 최적화를 위한 것이다.

 

▷ Cleanup

import Button from "./Button"
import styles from "./App.module.css"
import { useState, useEffect } from "react";

function Hello(){
  
  function byeFn(){
    console.log('bye:(')
  }
  function hiFn(){
    console.log('created:)')
    return byeFn // cleanup함수 -> 실제로 자주 사용 X
  }
  useEffect(hiFn, [])
  return(
    <h1>Hello</h1>
  )
}

function App(){
  const [showing, setShowing] = useState(false)
  const onClick = () => {setShowing((prev) => !prev)}
  return (
    <div>
      {showing ? <Hello/> : null}
      <button onClick={onClick}>{showing ? 'hide' : 'show'}</button>
    </div>
  )
}

export default App;

show 버튼 클릭하면

created출력

hide 버튼 클릭하면

bye출력