[07-React] 6-4. React Hook :: useEffect

4. useEffect

: side-Effect를 처리하기 위한 Hook

: 컴포넌트가 로드될 때, 외부에서 발생하는 작업을 처리하는 함수

const Component=()=>{
	...
    useEffect(()=>{
    	// 할 일
    }, [props, state] //<- 의존성 배열로 안의 요소 값이 변하면 useEffect 실행
}

const App = () => {
  const [count, setCount] = useState(0);

  // useEffect로 부수효과 처리
  useEffect(() => {
    // 이 함수는 렌더링 후에 실행
    console.log('컴포넌트가 렌더링되었습니다!');
  }, []); // 빈 배열을 전달하면 이 effect는 컴포넌트가 처음 렌더링될 때만 실행

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
};

---

4.1 의존성 배열

1) 설정 X

:: 의존성 비교 없이 렌더링할 때마다 실행

:: 컴포넌트의 렌더링 여부 확인을 위해 사용

const Component1 = () => {
	console.log("렌더링");
}
const Component2 = () => {
	useEffect(()=>{
		console.log("렌더링");
    }) // 아무것도 설정 X시, 렌더링마다 실행
}

• Q: 함수형 컴포넌트는 렌더링되는데, 그럼 useEffect는 필요없는 게 아닐까?
• A: 2가지의 차이점을 가진다.
  1) SSR관전에서 useEffect는 클라이언트에서 실행되는 것을 보장해줌을 의미(WB의 API이용 가능-window ..)
  2) useEffect는 컴포넌트의 렌더링 완료 후에 실행 
      -> Compoenet1은 렌더링 중에 실행(SSR의 경우 서버에서 실행됨을 의미)
  => 부수 효과를 주는 의미에서는 useEffect를 명시하자.

 

2) [ ] : 빈 배열 설정
:: 맨 처음 렌더링에서만 실행 -> 이후에는 실행 X

const Component2 = () => {
	useEffect(()=>{
		console.log("첫 렌더링입니다.");
    },[]) // 빈배열 설정, 첫 렌더링만 실행
}

 

3) props 

:: 해당 props의 변화가 있다면, 해당을 실행

const Component2 = () => {
	useEffect(()=>{
		console.log("값이 바뀐 렌더링입니다.");
    },[props]) 
}

---

4.2 Cleanup 함수

: 컴포넌트가 언마운트될 때 or 의존성 배열의 값이 변경될 경우, 실행

: 이전에 해당 함수에서 설정된 side-effect를 정리하여 메모리 누수 방지 및 불필요한 리소스 해제

 

Ex)

const TimerComponent = () => {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    // 타이머 설정
    const timerId = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    // 컴포넌트가 언마운트될 때 타이머 정리 (클린업)
    return () => {
      clearInterval(timerId);
      console.log('타이머가 정리되었습니다.');
    };
  }, []); // 빈 배열을 전달하여 컴포넌트가 처음 렌더링될 때만 실행

  return (
    <div>
      <h1>{seconds} 초</h1>
    </div>
  );
};

- 특정 이벤트 및 조작 등이 렌더링마다 무수히 추가되는 것을 방지

---

4.3 주의점

1) eslint-disable-line react-hooks/exhaustive-deps 자제

2) 되도록 기명함수로 작성-용도 파악이 용이하도록

3) 외부함수의 추가는 자제

4) 부수효과를 거대하게 작성 X

5) useEffect안에 직접적으로 async 사용 시, useEffect의 경쟁 상태를 초래

• 5-1) 경쟁 상태 해결을 위해서는 클린업 함수를 사용
  :: 비동기 함수를 직접 호출 X,
  :: 클린업 함수를 사용하여 컴포넌트 언마운트 시, 비동기 작업을 취소
       or 새요청이 완료되기 전의 이전 요청을 취소하도록 처리해야함

---

참고

asac 수업 자료

모던 리액트 Deep Dive