useEffect()란?

 

 

| useEffect 를 활용하여 mount/unmount/update 작업 해보기

useEffect 라는 Hook 을 사용하여 컴포넌트가 마운트,언마운트,업데이트 될 경우를 살펴보겠습니다.

마운트란?

mount : 컴포넌트가 처음 나타났을 때

unmount : 컴포넌트가 사라질 때

update : 특정 props가 바뀔 때

 

마운트/ 언마운트

function User({ user, onRemove, onToggle }) { useEffect(() => { console.log(" Mount ! 컴포넌트가 화면에 나타남"); return () => { console.log(" unMount ! 컴포넌트가 화면에서 사라짐"); } }); 

 

| useEffect() 사용하기

첫 번째 파라미터 : 함수

두 번째 파라미터 : 의존값이 들어있는 배열(deps)를 가집니다.

!! 만약 두 번째 파라미터에 빈배열 을 넣을 경우 딱 한 번 처음 마운트 될 경우에만 useEffect() 에 등록한 함수가 호출됩니다.

 

그리고 useEffect() 에서는 함수 반환이 가능합니다. (= celanup 함수)

cleanup 함수는 useEffect()에 대한 뒷정리를 해준다고 생각하면 편합니다.

deps가 비어있는 경우에는 컴포넌트가 사라질 때 celanup 함수가 호출됩니다.

 

마운트 시에 하는 작업들은 어떤것이 있을까?

• props 로 받은 값을 컴포넌트의 로컬 상태로 설정
• 외부 API 요청
• 라이브러리 사용
• setInterval을 통한 반복 작업 OR setTimeout을 통한 예약 작업

 

그럼 언마운트 시에 하는 작업들은 ?

• setInterval, setTimeout을 사용하여 등록한 작업들을 clear 하기
• 라이브러리 인스턴스 제거

 

deps에 특정 값 넣기

deps에 특정 값을 넣으면, 컴포넌트가 처음 마운트 될 때에도 호출되고,

지정한 값 ( = deps ) 이 바뀔 때에도 호출이 됩니다.

만일, deps안의 특정 값이 있다면 언마운트시에도 호출이 되고, 값이 바뀌기 직전에도 호출이 됩니다.

 function User({ user, onRemove, onToggle }) { useEffect(() => { console.log(" Mount ! user값이 설정됨"); console.log(user); return () => { console.log(" unMount ! user가 바뀌기 전"); console.log(user); } },[user]); 

 

useEffiect() 안에서 사용하는 상태러 props가 있다면 useEffiect 의 deps 안에 넣어줘야 합니다. 이것은 규칙 !

(만약 넣지 않는다면 useEffect() 안에서 사용하는 상태나 props를 deps에 넣지 않는다면 useEffect()에 등록한 함수가 실행 될 때 최신 props/ 상태를 가르키지 않게 됩니다.)

즉, [] (deps)안에 상태값을 넣어야 최신 상태를 유지하며 리렌더링이 처음 렌더링을 제외하고, 나머지 상황에서는 계속 발생하지 않습니다.

 

리액트는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링이 되기 때문입니다.

(바뀐 내용이 없어도 ! Virtual DOM에서는 모든걸 다 렌더링 합니다.)

 

 

| debs 파라미터를 생락하면 ?

deps 파라미터를 생략한다면, 컴포넌트가 리렌더링 될 때마다 호출이 됩니다.