React.js - useEffect 훅

useEffect 훅이란?

• 클래스 컴포넌트의 라이프사이클 함수와 비슷한 역할
• 한 컴포넌트 안에서 여러 번 정의하여 사용 가능
• useEffect 훅의 첫 번째 매개 변수에는 콜백 함수를 설정할 수 있으며, 이 콜백 함수는 useEffect 훅의 역할을 정의
• 두 번째 매개 변수에는 배열 전달

 

 

첫 번째 매개 변수로 함수를 반환하는 경우

useEffect(() => {
    ...
    return () => {
        ...
    };
});

• 클래스 컴포넌트의 componentWillUnmount 라이프사이클 함수와 같은 역할을 수행
• 즉, 컴포넌트가 화면에서 사라진 이후에 이 함수가 호출
• 라이브러리의 연동을 해제하거나 타이머를 해제하는 데에 주로 사용

 

 

두 번째 매개 변수로 빈 배열 전달하는 경우

useEffect(() => {
    ...
}, []);

• 클래스 컴포넌트의 componentDidMount 라이프사이클 함수와 같은 역할을 수행
• 즉, 컴포넌트가 처음 화면에 표시된 후 useEffect 훅이 한 번만 호출

 

 

두 번째 매개 변수인 배열을 생략하는 경우

useEffect(() => {
    ...
});

• 클래스 컴포넌트의 componentDidMount 라이프사이클 함수와 componentDidUpdate 라이프사이클 함수의 역할을 동시에 수행
• 즉, 컴포넌트가 처음 화면에 표시된 이후에도 한 번 실행되며, Props나 State의 변경에 의해 컴포넌트가 리렌더링되면 useEffect 훅 다시 실행

 

 

두 번째 매개 변수로 배열 전달하는 경우

useEffect(() => {
    ...
}, [posts]);

• 모든 Props와 State의 변경에 호출되는 componentDidUpdate 라이프사이클 함수와 달리, 전달된 변수가 변경될 때에만 이 함수가 호출 되도록 설정 가능
• 컴포넌트가 화면에 표시된 후 한 번 호출되며, posts 변수의 값에 변경 사항이 발생하면 이 변경 사항을 감지하고 useEffect 훅의 콜백 함수를 실행

 

 

---

참고

- 현장에서 바로 써먹는 리액트 with 타입스크립트