[🍎코딩애플 강의요약]Lifecycle과 useEffect 1 ⚡

오늘의 숙제 📝

Detail 페이지 안에 노란 박스 하나 만들고, Detail 페이지 방문 후 2초 후에 박스가 사라지게 해보십시오.

팁: 동적인 UI 어떻게 만든다고 했나요? 🤔

컴포넌트의 Lifecycle (생명주기) 🔄

컴포넌트도 인생이 있습니다! 사람처럼 태어나고, 살다가, 죽습니다.

컴포넌트의 3단계 인생

1. 생성 (Mount) 🎂 - 컴포넌트가 처음 나타날 때
2. 재렌더링 (Update) 🔄 - 컴포넌트가 변경될 때
3. 삭제 (Unmount) 💀 - 컴포넌트가 사라질 때

Lifecycle을 배우는 이유 💡

컴포넌트 인생의 중간중간에 간섭할 수 있기 때문입니다!

• "컴포넌트 등장할 때 이것 좀 해줘"
• "컴포넌트 사라지기 전에 이것 좀 해줘"
• "컴포넌트 업데이트 후에 이것 좀 해줘"

이런 간섭은 갈고리(hook)를 달아서 합니다!

Lifecycle Hook 사용법 🪝

옛날 방식 (Class Component)

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 로드되고나서 실행할 코드
  }
  componentDidUpdate(){
    //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 삭제되기전에 실행할 코드
  }
}

요즘 방식 (Function Component + useEffect)

import {useState, useEffect} from 'react';

function Detail(){
  useEffect(() => {
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });
  
  return (
    // 컴포넌트 내용
  )
}

useEffect 테스트해보기

import {useState, useEffect} from 'react';

function Detail(){
  useEffect(() => {
    console.log('안녕')
  });

  let [count, setCount] = useState(0)
  
  return (
    <button onClick={() => { setCount(count+1) }}>버튼</button>
  )
}

참고: <React.StrictMode> 태그가 있으면 개발 모드에서 2번 출력됩니다 (디버깅용)

useEffect를 사용하는 진짜 이유 🎯

"useEffect 밖에 적어도 똑같은데요?" 🤨

맞습니다! useEffect 바깥에 적어도 컴포넌트 mount & update 시 실행됩니다.

핵심 차이점: 실행 시점! ⏰

useEffect 밖에 코드 작성:

function Detail(){
  (반복문 10억번 돌리는 코드)  // ← html 렌더링 전에 실행
  return (생략)
}

→ 반복문 완료 후 HTML 보여줌

useEffect 안에 코드 작성:

function Detail(){
  useEffect(() => {
    (반복문 10억번 돌리는 코드)  // ← html 렌더링 후에 실행
  });
  
  return (생략)
}

→ HTML 먼저 보여주고 반복문 실행

useEffect의 용도 🛠️

Side Effect란?

• 핵심 기능: HTML 렌더링
• Side Effect: 그 외의 부가적인 기능들

useEffect에 넣으면 좋은 것들

• 오래 걸리는 반복 연산 🔄
• 서버에서 데이터 가져오는 작업 📡
• 타이머 설정하기 ⏱️
• DOM 조작하기 🎨

목적: HTML 렌더링을 빠르게 하여 사용자 경험 개선! ⚡

---

보충 설명 💡

useEffect의 다양한 사용 패턴 🎨

1. 기본 사용법 (mount + update 시 실행)

useEffect(() => {
  console.log('컴포넌트 렌더링됨');
});

2. 한 번만 실행 (mount 시에만)

useEffect(() => {
  console.log('컴포넌트 처음 렌더링됨');
}, []); // 빈 배열이 핵심!

3. 특정 값 변경 시에만 실행

useEffect(() => {
  console.log('count가 변경됨');
}, [count]); // count 변경 시에만 실행

4. cleanup 함수 (unmount 시 실행)

useEffect(() => {
  const timer = setInterval(() => {
    console.log('1초마다 실행');
  }, 1000);
  
  return () => {
    clearInterval(timer); // 컴포넌트 제거 시 타이머 정리
  };
}, []);

실전 useEffect 활용 예시 🎯

1. API 데이터 가져오기

function ProductList() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    fetch('/api/products')
      .then(response => response.json())
      .then(data => {
        setProducts(data);
        setLoading(false);
      })
      .catch(error => {
        console.error('데이터 로딩 실패:', error);
        setLoading(false);
      });
  }, []); // 컴포넌트 마운트 시 한 번만
  
  if (loading) return <div>로딩 중...</div>;
  
  return (
    <div>
      {products.map(product => (
        <div key={product.id}>{product.name}</div>
      ))}
    </div>
  );
}

2. 타이머 구현

function Timer() {
  const [seconds, setSeconds] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);
    
    // cleanup: 컴포넌트 제거 시 타이머 정리
    return () => clearInterval(interval);
  }, []);
  
  return <div>{seconds}초 경과</div>;
}

3. 윈도우 이벤트 리스너

function ScrollTracker() {
  const [scrollY, setScrollY] = useState(0);
  
  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };
    
    window.addEventListener('scroll', handleScroll);
    
    // cleanup: 이벤트 리스너 제거
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);
  
  return <div>스크롤 위치: {scrollY}px</div>;
}

useEffect 최적화 팁 ⚡

1. 의존성 배열 올바르게 사용하기

// ❌ 잘못된 예: 무한 루프 위험
useEffect(() => {
  setData(processData(props.rawData));
}); // 의존성 배열 없음

// ✅ 올바른 예: props.rawData 변경 시에만 실행
useEffect(() => {
  setData(processData(props.rawData));
}, [props.rawData]);

2. useCallback과 함께 사용

function Parent() {
  const [count, setCount] = useState(0);
  
  // useCallback으로 함수 메모이제이션
  const fetchData = useCallback(async () => {
    const response = await fetch(`/api/data/${count}`);
    return response.json();
  }, [count]);
  
  return <Child onFetch={fetchData} />;
}

function Child({ onFetch }) {
  useEffect(() => {
    onFetch().then(data => console.log(data));
  }, [onFetch]); // onFetch가 변경될 때만 실행
}

자주 하는 실수와 해결법 🚨

1. 무한 루프

// ❌ 문제: 무한 루프 발생
function BadComponent() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    setData([...data, 'new item']); // data 변경 → 리렌더링 → useEffect 재실행
  }, [data]);
}

// ✅ 해결: 함수형 업데이트 사용
function GoodComponent() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    setData(prev => [...prev, 'new item']);
  }, []); // 빈 배열로 한 번만 실행
}

2. Memory Leak 방지

function Component() {
  useEffect(() => {
    const subscription = subscribe();
    
    // 반드시 cleanup 함수에서 정리하기
    return () => {
      subscription.unsubscribe();
    };
  }, []);
}

숙제 해결 힌트 💡

노란 박스가 2초 후 사라지게 하려면:

1. useState로 박스 표시/숨김 상태 관리
2. useEffect에서 setTimeout 사용
3. 동적 UI 패턴 적용 (조건부 렌더링)

// 힌트 구조
function Detail() {
  const [showBox, setShowBox] = useState(true);
  
  useEffect(() => {
    // 2초 후 박스 숨기기
    setTimeout(() => {
      setShowBox(false);
    }, 2000);
  }, []);
  
  return (
    <div>
      {showBox && <div className="yellow-box">노란 박스</div>}
      {/* 나머지 내용 */}
    </div>
  );
}