1. React Hooks 개요

React Hooks란?

• React Hooks는 함수형 컴포넌트에서 상태 관리와 부수 효과(side effects) 등을 처리할 수 있도록 도와주는 API 함수
• 최신 리액트에서는 클래스형 컴포넌트 대신 함수형 컴포넌트와 Hooks 사용을 권장

주요 Hook 설명

• useRef
  • 용도: 컴포넌트의 DOM 요소에 대한 참조값을 생성하고 참조하는 데 사용
  • 사용 예: <input> 요소에 직접 접근할 수 있는 방법을 제공하여 값을 가져오거나 수정
• useState
  • 용도: 컴포넌트의 상태값을 생성하고 관리하는 훅
  • 사용 예: 버튼 클릭 시 카운트 값을 증가시키는 기능에서 상태를 관리하는 데 사용
• useReducer
  • 용도: 컴포넌트의 다양한 상태 업데이트를 위한 훅
  • 특징: 현재 상태와 액션을 인자로 받아 새로운 상태를 반환합니다. 복잡한 상태 업데이트 로직에 유용
• useMemo
  • 용도: 연산 비용이 큰 함수의 결과를 메모이제이션하여 성능을 최적화하는 훅
  • 특징: 이전에 계산된 값으로 재사용하므로 불필요한 처리를 방지
• useCallback
  • 용도: 성능 최적화를 위해 렌더링 시에 함수가 매번 새로 생성되는 것을 방지하는 훅
  • 특징: 함수를 메모이제이션하여, 자식 컴포넌트가 불필요하게 리렌더링되는 것을 방지
• useEffect
  • 용도: 컴포넌트의 생명주기에 따라 특정 작업을 처리하는 훅
  • 특징: 마운트, 업데이트, 언마운트 시에 부수 효과를 처리
• 커스텀 훅
  • 용도: 자주 사용되는 코드를 재사용하기 위한 사용자 정의 훅
  • 특징: 커스텀 훅은 배열이나 객체 형태로 값을 반환하고, 다른 컴포넌트에서 재사용

2. 함수형 컴포넌트의 생명주기

마운트 (Mount)

• 정의: 컴포넌트가 처음으로 브라우저에 출력되는 단계
• React에서: useEffect 훅을 사용하여 컴포넌트가 마운트될 때 실행할 작업을 정의

업데이트 (Update)

• 정의: 컴포넌트의 상태나 속성(props)이 변경되어 컴포넌트가 다시 렌더링되는 단계
• React에서: 상태나 props가 변경될 때마다 리렌더링되며, useEffect 훅을 사용하여 특정 값이 변경될 때마다 작업을 실행