JavaScript Sec05_4 React에서 LifeCycle 제어하기 (useEffect)

LifeCycle

---

LifeCycle을 제어한다?

컴포넌트가 탄생하고 변화하고 사라지는 순간에 각각 어떤 작업을 수행시킬 수 있다는 것을 의미한다.

(ex. 초기화 작업, ex.예외 처리 작업, ex. 메모리 정리 작업)

 

클래스형 react Component와 함수형 react Component

• 지금까지 우리가 사용한 것은 함수형 컴포넌트
• 오직 클래스형 컴포넌트만 lifecycle를 제어하는 메소드와 state 기능을 사용할 수 있는데, use 키워드를 이용하여 클래스형 컴포넌트만 근본적으로 갖고 있는 기능을 함수형 컴포넌트에서 낚아채서 사용할 수 있다. (React Hooks)

useEffect

• react의 lifecycle을 제어하는 메소드를 가져올 수 있는 기능
• 의존성 배열이 변화하는 순간 콜백함수가 수행된다.

첫 번째 파라미터로 콜백함수를, 두 번째 파라미터로 의존성 배열을 작성한다.

#1. 컴포넌트가 탄생할 때 (Mount 되는 시점) 제어

• useEffect의 두 번째 파라미터에 빈 배열을 전달하면 컴포넌트가 mount 되는 시점에만 작동하여 컴포넌트가 mount 될 때만 “Mount!”가 콘솔 창에 입력 됨
• 버튼 클릭 등의 이벤트가 발생하여 리렌더링이 될 때 콘솔 창에 “Mount!” 가 입력되지 않음

#2. 컴포넌트가 업데이트 될 때 (리렌더 될 때) 제어

• useEffect의 두 번째 파라미터에 아무 것도 전달하지 않으면 컴포넌트가 업데이트 될 때마다 콜백 함수가 실행 된다.

#3. 특정 요소만 제어

• useEffect는 의존성 배열이 변화할 때 콜백함수가 수행되므로 특정 값이 변화할 때 수행할 함수를 제어할 수 있다.

#3. 컴포넌트가 사라질 때 (Unmount 될 때) 제어

• 단락 회로 평가 {isVisible && <UnmountTest />}
  • isVisible이 false라면 뒤의 요소는 볼 필요가 없지만
  • invisible이 true라면 뒤의 요소까지 확인해야 한다.
  • 따라서 invisible이 true일 때는 <UnmountTest /> 컴포넌트가 실행된다.
• useEffect의 콜백함수 안에 return문을 넣으면 그 return문은 컴포넌트가 사라질 때 실행된다.
  • on/off 버튼을 클릭하면 버튼 밑에 Unmount Testing Component 가 뜨고 콘솔에는 mount! 가 출력된다.
  • on/off 버튼을 다시 클릭하면 UnmountTest는 unmount되어 Unmount Testing Component가 사라지고 콘솔에는 return 문인 unmount!가 출력된다.