[React] useEffect에 대한 고찰

평생 vue.js만 써오던 사람이라, react.js는 언제 봐도 어렵다.

 

간단하게 useEffect에 대해 설명하자면, 마운트될 때, 언마운트될 때, 값이 변경될 때 재실행되도록 돕는 함수라는 것이다.

 

useEffect( ()=> { console.log(a, b, c) } )

위와 같은 형태로 사용한다.

이 예시에서는 a,b,c 값이 변경되거나, 마운트될 때, 언마운트될 때 useEffect 내의 콜백함수가 실행된다.

 

useEffect(() => { console.log('count 상태가 변경될 때마다 실행됩니다.'); }, [count]);

위와 같은 형태로 두번째 매개변수(배열)를 넣게 되면 매개변수값이 변경될 때에만 useEffect 내의 콜백함수가 실행된다.

 

useEffect의 기본 동작은 모든 렌더링을 완료한 후 effect를 발생시킨다. 값 중 하나라도 변경된다면 effect는 항상 재생성된다. 이를 해결하기 위한 것이 두번째 매개변수를 활용하는 것이다. 

 

useEffect(() => { console.log('첫렌더링에만 호출'); }, []);

두번쨰 인자를 빈 배열로 두면 첫마운트에만 실행된다.

 

useEffect(() => {
  console.log('state가 변경될 때 마다 호출!');
  return () => {
    console.log('언마운트 시 호출!')
  }
})

return 값을 주면 그 이후 코드는 언마운트에 실행된다.

 

const UseEffectExample = () => {
  const [test, setTest] = useState('initial state');

  useEffect(() => {
    console.log('첫 렌더링에만 호출');
    return () => {
      console.log('마지막 언마운트 시 호출')
    }
  }, [])

 

return 값 + 두번째 인자를 빈배열로 넣어주면

return 이전 값은 첫마운트에만 한 번 호출되고

return 이후 값은 언마운트에만 한 번 실행된다.

 

심화

useEffect(() => {
  const userId = auth.currentUser.uid;
  const requestsRef = ref(database, `users/${userId}/friendRequests`);
  const friendsRef = ref(database, `users/${userId}/friends`);

  const unsubscribeRequests = onValue(requestsRef, (snapshot) => {
    const data = snapshot.val();
    const requests = data ? Object.keys(data) : [];
    setFriendRequests(requests);
  });

  const unsubscribeFriends = onValue(friendsRef, (snapshot) => {
    const data = snapshot.val();
    const friendList = data ? Object.keys(data) : [];
    setFriends(friendList);
  });

  // Cleanup subscription on unmount
  return () => {
    unsubscribeRequests();
    unsubscribeFriends();
  };
}, []);