<React> useEffect() 정리

📚 useEffect()

useEffect는 코드가 한 번 또는 특정한 코드가 변경되었을때만 실행되도록 도와줄 수 있는 function입니다.

useEffect는 두 개의 argument를 가지는 function 입니다.
첫 번째 argument는 한번만 실행하고 싶은 함수 코드가 두 번째 argument에는 코드의 특정한 부분의 변화를 감시하고 동작시키고 싶을 때 감시해줄 값을 넣어줍니다.

function App() {
  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState('');
  const onClick = () => setValue((prev) => prev + 1)
  const onChange = (event) => setKeyword(event.target.value)
  
  // 카운트나 키워드가 변경될 때 마다 실행됨
  console.log('im run all the time')
  
 //📌 빈 배열 괄호를 넣어주면 페이지가 처음 랜더링 될때만 동작하고 더이상 동작하지 않음
  useEffect(() => {
    console.log('only once')
  }, [])
 //📌 keyword가 if 조건문에 맞게 변경되었을 때만 동작함
  useEffect(() => {
    if(keyword !== '' && keyword.length > 5) {
      console.log('search for', keyword)
    }
  }, [keyword]) // 📌 변화를 감시하고 싶은 값을 배열괄호 안에 넣어줌
  
  
  return (
    <div>
      <input 
        value={keyword}
        onChange={onChange}
        type='text'
        placeholder="search here"
      />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

위의 예시에서 처럼 useEffect 두번째 argument에 빈 배열 괄호를 넣어주면 페이지가 랜더링 되는 처음만 동작한 후 더이상 동작하지 않습니다.

useEffect를 쓰지 않은 console.log('im run all the time') 코드는 카운터가 바뀌거나 검색창에 입력시 계속해서 동작하게 됩니다.

두 번째 배열 괄호 안에 변화를 감시하고 싶은 값을 넣어주게 되면 해당 값이 변경될 때에만 첫 번째 argument가 동작하게 됩니다.

따라서 useEffect는 API와 같이 단 한번만 불러오고 싶은 내용은 useEffect 안에 빈 배열 괄호를 사용하여 한번만 호출해 줄 수있고, 원하는 값이 변경될 때 원하는 동작을 실행시키고 싶은 상황에 유용하게 사용해 줄 수 있습니다.

✏️ Cleanup Function

cleanup function은 컴포넌트가 없어질 때, 설정해준 함수를 실행시켜 줄 수 있는 기능입니다.

예를 들어, 컴포넌트가 없어질 때 event listener을 지워주거나 console.log에 뭔가를 보여주도록 할 수 있습니다.

cleanup function을 사용하는 방법은 useEffect 함수에서 return 값으로 또 다른 함수를 내보내주면 됩니다.

function Hello() {
  useEffect(() => {
    console.log('hi'); //📌처음 실행될 값
    return () => console.log('bye'); //📌컴포넌트가 없어질 때 나타날 함수 값
  }, [])
  
  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>
  );
}