8.2.1 마운트될 때만 실행하고 싶을 때

useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 됩니다.

기존 useEffect 코드를 다음과 같이 변경해 보세요.

Info.js - useEffect

useEffect(() => {
    console.log('마운트될 때만 실행됩니다.');
  }, []);

---

 

코드를 작성한 뒤에 다시 브라우저를 열어서 인풋을 수정해 보세요. 컴포넌트가 처음 나타날 때만 콘솔에 문구가 나타나고, 그 이후에는 나타나지 않을 것입니다.

▲ 그림 8-5 마운트될 때만 실행하기