📖 TIL - React Hooks 파헤치기: "아하, 이래서 훅을 쓰는구나! 🎣

📌 오늘의 학습

• 함수형 컴포넌트의 특징과 장점
• React Hooks의 기본 사용법 (useState, useEffect)
• 커스텀 훅 만들기

💡 핵심 개념 정리

함수형 컴포넌트의 특징

function Component() {
  // 컴포넌트 로직
  return (/* JSX */);
}

• 가독성이 좋고 문법이 간결함
• Hook 사용 가능
• 클래스형보다 메모리 사용량이 적음

useEffect 깊이 이해하기

useEffect(() => {
  // 실행할 코드
  return () => {
    // 클린업 함수
  }
}, [의존성배열]);

핵심 포인트:

• 첫 번째 인자: 콜백 함수
• 두 번째 인자: 의존성 배열
• 반환값이 없는 함수(void)
• 의존성 배열이 비어있으면 마운트 시 한 번만 실행

useState 실행 흐름

const [count, setCount] = useState(0);

• 초기 렌더링 시 상태 초기화
• setCount로 상태 변경 시 리렌더링 발생
• App 함수 다시 호출

커스텀 훅

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  // ... 로직
  return [count, setCount];
}

// Counter.jsx
function Counter() {
  const [count, setCount] = useCounter(0);
 ...

특징:

• 각 호출마다 독립적인 상태 관리
• 'use' 접두어로 훅임을 명시
• 코드 재사용성 향상

✨ 새롭게 배운 점

1. useEffect의 실행 시점

   • 외부 시스템 연동 시 사용
   • 의존성 배열 변경 시 콜백 실행

2. 렌더링 과정

   • document.getElementById('root')로 DOM 접근
   • JSX가 실제 함수 호출로 변환

3. Hook vs Util 함수

   • Hook은 'use' 접두어 필수
   • 상태 관리 여부로 구분

🚀 실무 적용 포인트

• 커스텀 훅으로 중복 로직 제거
• useEffect 의존성 배열 신중하게 관리
• 컴포넌트를 순수 함수처럼 설계

⭐️ 중요 용어

• Mount: 컴포넌트가 화면에 처음 나타나는 시점
• Unmount: 컴포넌트가 화면에서 사라지는 시점
• Side Effect: 외부 시스템과의 동기화 작업