useEffect

• class 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount가 합쳐진 것과 거의 비슷
• 첫번째 인자로는 콜백함수, 두번째 인자로는 dependency를 받는다
  (dependency를 쓸 경우, 첫 렌더링과 dependency가 업데이트 될 때마다 실행)

function example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
	console.log(`you clicked ${count} times!`)
  }, [count]);
  
  return (
    <button onClick={() => setCount(count + 1)}>click</button>
  )
}

• 콜백함수가 effect가 되며, 렌더링마다 다른 effect로 교체하여 전달됨
• 컴포넌트가 렌더링 된 후에 실행됨
  (useEffect 실행시점에는 DOM업데이트 완료 보장)
• 컴포넌트 내부에 위치하여 state 변수도 사용가능
• 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는지 알려줌
• 연관이 없는 여러 개의 side effect를 활용해야 할 경우, 여러 개의 useEffect를 사용하여 나눈다

clean-up이 필요없는 effect

• 실행 이후 신경쓸 것이 없는 경우
• 네트워크 요청, DOM 수동 조작, console.log 등

clean-up을 사용하는 effect

useEffect cleanup function이란?

• 컴포넌트가 unmount 되기 전(리렌더링 될 때마다) 코드를 정리하는 역할
• dependency 사용 권장
• 메모리 누수 또는 원하지 않는 행동 방지 가능

const [myData, setData] = useState([
  { id: "Work", label: "Work", value: 120 },
  { id: "Eat", label: "Eat", value: 35 },
  { id: "Commute", label: "Commute", value: 33 }
])

useEffect( ()=>{  
  let timer = setTimeout(() => {
  let randomTxt = makeid(6)
  setData( data=> data.concat({ id: randomTxt, label: randomTxt, value: 15 }))
}, 3000);

  return () => clearTimeout(timer)   //더이상 setTimeout 구독하지 않게
},[]);

출처: https://lts0606.tistory.com/487

커스텀 훅

• 반복되는 로직을 쉽게 사용하기 위해 커스텀 훅 제작 가능
• 테스트 용이, 재사용성 높아짐
• 이름은 use어쩌구로 시작하고 함수를 작성
• 함수 안에 useState, useEffect, useReduce, useCallback 등 hooks를 사용하여 원하는 기능을 구현
• 컴포넌트에서 사용하고 싶은 값 반환시키면 완성

커스텀 훅 예시

import { useState, useCallback } from 'react';

function useInputs(initialForm) {
  const [form, setForm] = useState(initialForm);
  //form 초기화: 파라미터로 받은 initialForm
  
  // change시키는 함수: input에서 입력받은 name, value를 이전 form의 내용을 포함하여 저장시킴
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    setForm(form => ({ ...form, [name]: value }));
  }, []);
  
  //form을 파라미터로 받은 initalForm으로 초기화시키는 함수
  const reset = useCallback(() => setForm(initialForm), [initialForm]);
  
  return [form, onChange, reset];
}

export default useInputs;

출처: 벨로퍼트와 함께하는 모던 리액트
https://react.vlpt.us/basic/21-custom-hook.html