(React) useEffect

useEffect 는 직접적인 타켓 출력을 하지 않는 작업으로서 fetch request, DOM 직접 조작, 타이머 함수등을 실행한다. 
※ 함수 컴포넌트의 body에서는 값의 계산을 하고 이외의 작업( fetch request, DOM 직접 조작, 타이머 함수등)을 정의하지 않는것이 기본이다. 위의 작업을 side-effects 라고 부른다.

 

useEffect(callback[, dependencies]);

• callback : 실행 함수, DOM 업데이트 후에 실행
• dependencies : 옵션 의존오브젝트 array. 만약 의존오브젝트가 렌더링 사이에 변화가 있다면  callback 함수가 실행된다.

 

dependencies 가 없는 경우

useEffect(() => {     // 렌더링이 될때마다 실행   });

 

[ ] 만 선언 되어 있는 경우

useEffect(() => {     // 맨 처음 렌더링 될 때 한번만 실행   }, [ ]);

 

dependencies 가 한개인 경우

useEffect(() => {   // 맨 처음 렌더링 경우 실행   // name 이 변경되는 경우에만 실행   document.title = `Greetings to ${name}`; }, [name]);

 

dependencies 가 배열로 존재하는 경우

useEffect(() => {     // 최초 렌더링시 한번 실행     // 그 다음 prop1, prop2, ..., state1, state2 중 하나라도 변경되는 경우에 실행   }, [prop1, prop2, ..., state1, state2]);

 

side-effect 의 cleanup (socket 닫기, timer 종료등)

useEffect(function callback() => {   // (1) Side-effect...   return function cleanup() {     // (2) Side-effect cleanup...   }; }, dependencies);

 

실행 순서.

   맨처음 렌더링시           :  only (1) 만 실행

   dependencies 변경시  : (2) -> (1) 순으로 실행

   마지막 페이지 파기시    : only (2) 만 실행

   ※ cleanup 을 해주지 않으면 기존 callback 함수에서 생성한 접속이 살아 있게 된다.

 

 

 

useEffect 를 이용한 샘플 : 처음 페이지 로딩시 api 로 데이터를 불러들여 name 리스트를 표시

import { useEffect, useState } from 'react'; function FetchEmployees() {   const [employees, setEmployees] = useState([]);   useEffect(() => {     async function fetchEmployees() {       const response = await fetch('/employees');       const fetchedEmployees = await response.json();       setEmployees(fetchedEmployees);     }     fetchEmployees();   }, []);   return (     <div>       {employees.map(name => <div>{name}</div>)}     </div>   ); }