[React] useEffect와 useCallback 차이 간단 정리!

useCallback()

• useCallback(함수, [검사값]) 검사값이 변경되었을 때에만 함수를 생성하는 Hook이다.

• 함수를 memoize → 재사용하기 위해서 사용(랜더링 성능 최적화)

• 검사값에 따른 랜더링 비교
  • [] : 검사값이 비어있으므로, 최초 랜더링시에만 함수를 선언하고 이후 계속 재사용한다
  • [number] : number 값이 변경되었을 때에만, 함수를 다시 선언

• 사용 이유
  • 자식 컴포넌트에게 props로 함수를 전달할 때 사용 → 자식 컴포넌트의 불필요한 랜더링을 방지
  • 함수 변경이 없거나, 연산이 큰 함수를 최초에만 선언하기 위해서 사용

useEffect()

• 사이드 이펙트를 방지하기 위해서 사용함

• 상세 사례
  • API Fetching : 컴포넌트 내에 axios를 선언해놓았는데, 해당 컴포넌트가 부모에 의해 계속 재랜더링된다면? 불필요한 api 요청이 계속 반복됨(side effect 발생)

    const [data, setData] = useState([]);
    
    // 컴포넌트 최초 마운트시에만 실행 -> 
    useEffect(() => {
      const fetchData = async () => {
        const result = await axios(
          'https://23log.tistory.com/api/v2/getPost'
        );
        setData(result.data);
      };
    	// fetch 후 setDate()로 state 등록
      fetchData();
    }, []);

  • 이벤트 리스너 추가/제거 : 컴포넌트 마운트 될 때, 이벤트 추가하고. 해제될 때 이벤트 제거를 위해서

    useEffect(() => {
      function handleResize() {
        // 등록하고자 하는 이벤트 등록
      }
    
    	// 검사값배열이 [] : 최초 랜더링 시 실행
      window.addEventListener('resize', handleResize);
    	// 클린업 함수 : 
      return () => {
        window.removeEventListener('resize', handleResize);
      };
    }, []);

  • DOM 업데이트 시 처리 등

🤷 그래서, 차이점은?

둘다 두번째 인자로 검사값(종속성 배열)을 받고 있어 비슷한 형태인데, 어떤 차이점이 있을까? 바로 위 설명처럼, 사용 목적에 그 차이점이 존재한다.

• useCallback
  • 콜백함수를 자식에게 전달해줄 때 사용
  • 자주 렌더링 위험이 있는 요소를 성능 최적화를 위해 사용
  • const onChange = useCallback(e => {...}); 이렇게 지정하고 자식에게 던진다!

• useEffect
  • 사이드 이펙트 방지를 위해 사용
  • API 통신(data fetch), 이벤트 리스너 추가, DOM 업데이트 등
  • useEffect(()=>{...}); 함수 호출을 통해, 실행한다!