useEffect의 콜백은 async로 선언할 수 없다. async 함수는 Promise를 반환하는데, useEffect는 cleanup 함수(또는 void)만 반환값으로 기대하기 때문이다.
대신 useEffect 내부에 async 함수를 선언하고 즉시 호출하는 패턴을 사용한다.
비동기(asynchronous) 데이터 패칭 시 useState()와 함께 자주 사용된다.
JavaScript
Synapse Map Insight
useEffect(()=>{},[의존성 배열])
useEffect(()=>{// 의존성 배열이 없으므로 모든 경우에서 렌더링 console.log('렌더링이 완료되었습니다!'); console.log({ name, nickname });});
useEffect(()=>{// 처음 컴포넌트가 마운트 될 때 실행 console.log('마운트될 때만 실행됩니다.');},[]);
useEffect(()=>{// 처음과 name이 바뀔 때만 실행 console.log(name);},[name]);
useEffect(()=>{// 처음과 name이 바뀔 때만 실행 console.log('effect'); console.log(name);return()=>{// cleanup 작업 컴포넌트라 언마운트 될 때 실행 console.log('cleanup'); console.log(name);};},[name]);
useEffect(()=>{// 처음과 name이 바뀔 때만 실행 console.log('effect');return()=>{// cleanup 작업 컴포넌트라 언마운트 될 때 실행 console.log('cleanup');};},[]);
// 잘못된 방법 — useEffect 자체를 async로useEffect(async()=>{const data =awaitfetchData();// 작동하지만 cleanup 반환 불가},[]);// 올바른 방법 — 내부에 async 함수 선언 후 즉시 호출useEffect(()=>{asyncfunctionloadData(){const data =awaitfetchData();setData(data);}loadData();},[]);// 경쟁 조건(Race Condition) 방지 패턴useEffect(()=>{let cancelled =false;asyncfunctionloadData(){const data =awaitfetchData(id);if(!cancelled)setData(data);// 이미 언마운트됐으면 상태 업데이트 건너뜀}loadData();return()=>{ cancelled =true;};},[id]);
