[React] 훅! useEffect

React-icon

1. React에서 가장 중요한 훅 useEffect

---

컴포넌트가 화면에 Mount(첫 렌더링) 될 때, Update(다시 렌더링) 될 때, 화면에서 Unmount(제거) 될 때 특정 작업을 처리할 코드를 실행하고 싶다면 useEffect를 사용하면 된다. 

 

컴포넌트 (component): 자바스크립트, 특히 웹 개발에서 컴포넌트는 재사용이 가능한 코드 조각을 의미한다.

2. useEffect 형태

---

// 기본 형태
useEffect(setup, dependencies?)

 

useEffect 훅은 인자로 콜백 함수(다른 함수의 인자로 전달된 함수)를 받는다. 우리는 콜백 함수에 원하는 작업을 처리해줄 코드를 작성해주면 된다. useEffect의 형태로 아래와 같이 두 가지만 기억하면 된다. 첫 번째 형태는 useEffect의 인자로 하나의 콜백 함수만을 받고, 두 번째 형태는 useEffect의 인자로 콜백 함수와 의존성 배열(Array of Defendencies)을 받는다.

첫 번째 형태는 렌더링이 될 때 마다 매번 콜백이 실행된다. 즉, 컴포넌트가 맨 처음 화면에 렌더링이 될 때 그리고 컴포넌트가 다시 렌더링이 될 때 실행된다. 두 번째 형태는 매번 실행되는 것이 아니라 컴포넌트가 맨 처음 렌더링이 될 때와 배열에 들어있는 요소의 값이 바뀔 때만 실행이된다. 만약 빈 배열을 전달해 준다면 컴포넌트가 맨 처음 화면에 렌더링 될 때만 실행된다.

// 형태1 - 렌더링 될 때마다 실행됨 (Mount, Update)
useEffect(() => {
	// 작업
});

// 형태2 - Mount 될 때, value값이 바뀔 때 실행됨
useEffect(() => {
	// 작업
}, [value]);

3. Clean Up 함수

---

useEffect에 어떤 서비스의 작업 처리 코드를 작성했다면, 정리 작업(Clean Up) 또한 처리해줘야 할 때가 있다. 예를 들면 타이머를 시작했다면 멈추는 작업을 해주고, 이벤트 리스너를 등록했다면 제거하는 클린업 정리 작업이 있다. 이러한 경우 useEffect에 반환값(return)으로 함수를 넣어주면 된다. 이 함수 안에서 우리가 원하는 정리하는 작업을 처리해주면 된다. 이렇게 함수를 리턴해주면 해당 컴포넌트가 Unmount 될 때 혹은 다음 렌더링 시 호출된 useEffect가 실행되기 이전에 그 함수가 실행된다.

useEffect(() => {
    // 구독
    return () => { // Clean Up 함수 - Unmount 될 때 또는 다음 렌더링 시 useEffect가 실행되기 전에 실행됨
        // 구독 해지
    }
}, []);

 

 

 

 

 

원문 출처: 별코딩 React Hooks - useEffect