[React Hook] 컴포넌트 내 Effect Hook(useEffect) 사용 개념정리

함수형 컴포넌트는 내부에 선언된 상태 훅(State Hook)의 변화나 렌더링 상황에 따라 함수형 컴포넌트 자체가 재 호출된다. 그래서 함수형 컴포넌트내에 단순히 변수를 선언하거나, 함수를 호출하면 의도한 결과가 제대로 수행되지 않을 수 있다.

 

아래 소스는 개인개발 프로젝트를 하면서 겪은 뻘짓 코드이다. audio 객체 및 init 함수의 동작이 원하는대로 수행되지 않아 고생했다.

function MusicPlayer() {

 const audio = new Audio(); // 이렇게 선언할 경우 MusicPlayer 내 다른 state hook이 변경될때마다 매번 객체가 새로 생성됨.
 const [totalTime, setTotalTime] = useState(1);
 const [currentTime, setCurrentTime] = useState(0);
 
 function init() {
 }
 
 init(); // 마찬가지로 이런방식을 사용해선 안된다.

 return 
 (<>
 ... 화면 구현 ...
 </>)
}

이를 방지하기위해 React에는 Effect Hook이란 개념이 존재하는데, 공식 React 홈페이지 내용이 잘 이해가 안되서 직접 겪어보며 깨닫게된 내용을 정리하고자 이 글을 쓰게 되었다. 사실 이것도 능지(?) 부족과 일단 만들고 보자는 식의 프로젝트 진행으로 인해 정확하게 작성했다고 보긴 어려울 수 있다.

 

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

1. 컴포넌트내에서 최초1회로 호출하고 싶을 때

상태변화에 상관없이 함수를 1회만 호출하고 싶다면 아래와 같이 작성해야한다.

  useEffect(() => {
    init();
  }, []); // [] 내용물이 없으면 최초 1회만 호출
  

2. 특정 상태값(useState)에 대해서만 값의 변동 발생시 호출하고 싶을때

currentTime, totalTime 이라는 이름의 상태 훅(State Hook)값이 새로 정의될 때마다 호출된다. 다른 상태값이 변화할땐 해당 영역은 호출하지 않는다.

  useEffect(() => {
    if(currentTime >= totalTime) {
      setNext();
    }
  }, [currentTime, totalTime]); 
  // currentTime 또는 totalTime 상태 훅(State Hook)값이 변경될때마다 useEffect 안의 내용이 호출됨.

 

글을 정리하면서 확인해보니 Hook API Reference 란에 친절히 설명되어 있었다.

https://ko.reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

Hooks API Reference – React

3. 모든 상태값 변동시마다 호출하고 싶을때

컴포넌트안의 모든 상태 훅(State Hook) 값이 변경될때마다 호출하고싶다면 아래와 같이 작성하면 된다.

  useEffect(() => {
    console.log('always call.')
  }); 
  컴포넌트내 상태 훅에 변동발생시마다 호출

4. useEffect()는 컴포넌트내 여러개 선언할 수 있다.

뭔가 한번만 쓰는줄 알고 뻘짓을 했었다. 한 컴포넌트내에 여러 개 호출할 수 있다.

function MusicPlayer() {

  const [totalTime, setTotalTime] = useState(1);
  const [currentTime, setCurrentTime] = useState(0);
  
  useEffect(() => {
    init();
  }, []); // [] 내용물이 없으면 최초 1회만 호출

  useEffect(() => {
    if(currentTime >= totalTime) {
      setNext();
    }
  }, [currentTime, totalTime]);
  
}