Lifecycle과 useEffect 2 ⚡

저번시간 숙제 해결 📝

Detail 페이지에서 2초 후 박스가 사라지게 만들기 🕐

동적인 UI 만들 때의 기본 원칙:
1. UI 상태를 저장할 state 만들기 🔧
2. state에 따라 UI가 어떻게 보일지 작성하기 🎨

function Detail(){
  let [alert, setAlert] = useState(true)

  useEffect(()=>{
    setTimeout(()=>{ setAlert(false) }, 2000)
  }, [])

  return (
    {
      alert == true
      ? <div className="alert alert-warning">
          2초이내 구매시 할인
        </div>
      : null
    }
  )
}

• alert state가 true면 노란박스 보임 ✅
• false면 안보임 ❌
• useEffect와 setTimeout으로 2초 후 자동 숨김 처리 ⏰

---

useEffect 실행조건 제어하기 🎯

특정 변수 변경 시에만 실행 🔄

useEffect(()=>{ 
  실행할코드 
}, [count])

• 두 번째 파라미터에 [변수명] 형태로 조건 설정 📋
• count 변수가 변할 때만 useEffect 실행 🎪
• 배열 안에 여러 개 state 넣을 수 있음 🧮

컴포넌트 로드 시 1회만 실행 🚀

useEffect(()=>{ 
  실행할코드 
}, [])

• 빈 배열 [] 사용 시 컴포넌트 mount 시 1회만 실행 🎯
• 페이지 로드 후 한 번만 실행하고 싶을 때 사용 💫

---

Clean up function 🧹

기본 개념 💡

useEffect(()=>{ 
  그 다음 실행됨 
  return ()=>{
    여기있는게 먼저실행됨
  }
}, [count])

• return 안의 함수가 useEffect 실행 전에 먼저 실행됨 ⚡
• "책상을 싹 치우고 시작"하는 개념과 같음 🧽
• clean up function이라고 부름 🏷️

실제 사용 예시 - 타이머 정리 ⏲️

useEffect(()=>{ 
  let a = setTimeout(()=>{ setAlert(false) }, 2000)
  return ()=>{
    clearTimeout(a)
  }
}, [])

왜 필요한가? 🤔

• setTimeout 사용 시마다 브라우저에 타이머 생성 📊
• 컴포넌트가 mount될 때마다 실행되어 타이머가 계속 쌓임 📈
• 타이머 100개, 1000개가 생길 수 있는 버그 방지 🚫
• clearTimeout()으로 기존 타이머 제거 후 새 타이머 생성 ♻️

Clean up function 주요 용도:

• 타이머 제거 ⏰
• Socket 연결 요청 제거 🔌
• Ajax 요청 중단 🌐
• 컴포넌트 unmount 시에도 1회 실행됨 📤

---

빡통식 정리 - useEffect 사용법 📚

1. 재렌더링마다 실행 🔄

useEffect(()=>{ 실행할코드 })

2. 컴포넌트 로드 시 1회만 실행 🎯

useEffect(()=>{ 실행할코드 }, [])

3. useEffect 실행 전 항상 실행 🧹

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
})

4. 컴포넌트 제거 시 1회 실행 📤

useEffect(()=>{ 
  return ()=>{
    실행할코드
  }
}, [])

5. 특정 state 변경 시에만 실행 🎪

useEffect(()=>{ 
  실행할코드
}, [state1])

---

오늘의 숙제 📋

input에서 숫자가 아닌 값 입력 시 경고 메시지 출력하기 ⚠️

• <input> 하나 만들기 📝
• 유저가 숫자 말고 다른 값 입력 시 "그러지마세요" 출력 💬
• useEffect 활용해보기 🎯
• 모르는 건 검색해서 해결하기 🔍

---

추가 정보 및 팁 💡

useEffect의 의존성 배열 심화 🧠

// 여러 개의 의존성
useEffect(()=>{
  console.log('name 또는 age가 변경됨')
}, [name, age])

// 객체나 배열을 의존성으로 사용할 때 주의점
const user = {name: 'John', age: 25}
useEffect(()=>{
  // 객체 참조가 바뀔 때마다 실행됨
}, [user]) // 주의: 매번 새로운 객체라면 계속 실행됨

성능 최적화를 위한 useEffect 패턴 ⚡

// debounce 패턴으로 API 호출 최적화
useEffect(()=>{
  const timer = setTimeout(()=>{
    // API 호출
    fetchSearchResults(searchTerm)
  }, 500)
  
  return ()=> clearTimeout(timer)
}, [searchTerm])

useEffect vs useLayoutEffect 차이점 🔍

// useEffect: 비동기적 실행 (화면 렌더링 후)
useEffect(()=>{
  // DOM 업데이트 후 실행
})

// useLayoutEffect: 동기적 실행 (화면 렌더링 전)
import { useLayoutEffect } from 'react'
useLayoutEffect(()=>{
  // DOM 업데이트 전 실행 (깜빡임 방지)
})

Clean up function 고급 활용 🔧

useEffect(()=>{
  // 이벤트 리스너 등록
  const handleScroll = () => {
    console.log('스크롤 중...')
  }
  
  window.addEventListener('scroll', handleScroll)
  
  // 이벤트 리스너 정리
  return () => {
    window.removeEventListener('scroll', handleScroll)
  }
}, [])

메모리 누수 방지를 위한 필수 패턴 🛡️

• 이벤트 리스너는 반드시 제거해야 함 🗑️
• API 요청은 컴포넌트가 사라질 때 취소해야 함 ❌
• 타이머나 인터벌은 정리해야 함 ⏰