React - Hook (State, Effect)

React 에서 Hook 이란?

함수형 컴포넌트에서 사용되는 state와 관련된 기술들을 모아서 일컫는 말임 

대표적으로 useEffect() , useState() 가 있음

 

Hook은 함수컴포넌트에서 React State 와 생명주기 기능을 연동 할수 있게 해주는 함수임

Hook 은 class 안에서 동작하지 않음 단 class 없이 React 를 사용할수 있게 해주는 것임

---

 

React Hooks에서 구독(subscription)과 클린업(cleanup)은 부수 효과(side effect) 관리를 위한 핵심 개념임

 

구독(subsciption) 이란?

• 외부 데이터 소스 연결 : WebSocket, 실시간 DB, 이벤트 리스너 등 지속적인 연결이 필요한 경우
• 장기 실행 작업 관리: 타이머(setInterval), 애니메이션 프레임 요청 등

cleanup이란?

 

cleanup이란, useEffect()에서 parameter로 넣은 함수의 return 함수임

컴포넌트의 unmount 이전 / update 직전에 어떠한 작업을 수행하고 싶다면 cleanup 함수를 반환해줘야 함

필수적인 이유

문제 유형	발생 원인	결과적 영향
메모리 누수	구독 해제 실패 시 GC가 객체 회수 불가	애플리케이션 성능 저하
고아 이펙트	컴포넌트 언마운트 후 상태 업데이트 시도	Can't perform state update on unmounted component 오류
예측 불가 동작	중복 이벤트 리스너/타이머 존재	데이터 경쟁 조건 발생

 

어떤 상태를 subscribe 하고자 하는 경우에는 memory leak 이 생기지 않도록 cleanup이 필요함

 

라이프 사이클 작동 시점

1. 컴포넌트 언마운트 시: 최종 클린업 실행
2. 의존성 배열 변경 시 : 이전 효과 클린업  → 새 효과 실행
3. 개발 모드: 의도적 이중 실행으로 누수 방지(React Strict Mode 동작)

 

예제 코드

 

이벤트 리스너 관리 코드 예제

useEffect(() => {
  const handleResize = () => {
    console.log(window.innerWidth);
  };

  window.addEventListener('resize', handleResize);
  
  return () => window.removeEventListener('resize', handleResize);
}, []);

 

API 요청 취소 코드 예제

useEffect(() => {
  const controller = new AbortController();
  
  fetch('/api/data', {
    signal: controller.signal
  })
  .then(response => response.json());

  return () => controller.abort();
}, []);

 

타이머 관리 코드 예제

useEffect(() => {
  const timerId = setInterval(() => {
    console.log('1초마다 실행');
  }, 1000);

  return () => clearInterval(timerId);
}, []);

 

최적화 관리 코드 예제

// 조건부 클린업 예시
useEffect(() => {
  let isMounted = true;
  
  const fetchData = async () => {
    const data = await fetch('/api');
    if(isMounted) setData(data);
  };

  fetchData();
  
  return () => {
    isMounted = false; // 컴포넌트 언마운트 시 플래그 변경
  };
}, []);

---

useEffect의 기본구조

useEffect(() => {
  //여기서 side effect를 실행
}, []);

 

useEffect 의 첫번째 인자는 함수임

해당 함수 내에서 side effect 를 실행하면 됨

 

useEffect 의 두번째 인자는 배열임

배열은 조건을 담고 있는데 여기서 조건은 어떤 값의 변경이 일어날때 를 의미함

따라서 해당 배열엔 어떤 값의 목록이 들어가게 됨 

이 배열은 종족성 배열이라고 부름!

 

그렇다면 언제 실행될까?

 

두번째 인자에 아무것도 넣지 않은 기본 형태일때

• 컴포넌트 생성후 처음 화면에 렌더링
• 컴포넌트에 새로운 props 가 전달되며 렌더링
• 컴포넌트레 상태가 바뀌며 렌더링

이처럼 매번 새롭게 컴포넌트가 렌더링 될때 Effect Hook 이 실행이 됨

 

빈 배열을 useEffect의 두 번째 인자로 사용하면, 이때에는 컴포넌트가 처음 생성될 때만 effect 함수가 실행됨

빈배열로 놓는 대표적인 경우는 처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때에 사용할 수 있음!

 

Hook 을 사용할때는 최상위에서만 Hook을 호출해야 하며 React 함수 내에서 Hook 을 호출해야 함