[리액트] React Hooks

React Hooks  :  함수형 컴포넌트에 상태 관리와 생명 주기 기능을 추가할 수 있게 해주는 API

 

React Hooks 이전 문제점

 

함수형 컴포넌트에서도 상태 관리와 생명주기 기능을 사용 할수있게되어 클래스 컴포의 필요성이 크게 줄어들음

 

1. 가장 기본적인 Hook으로 대부분의 클래스 컴포넌트 기능을 대체

가장 기본 적인 Hook

import React, { useState, useEffect } from 'react';// React와 useState, useEffect 훅을 가져옴
	 
	function Counter() { // Counter 컴포넌트 정의
	const [count, setCount] = useState(0);
	 
	useEffect(() => { // useEffect 훅을 사용하여 컴포넌트가 렌더링될 때마다 실행됨
	document.title = `You clicked ${count} times`;  // 문서의 제목을 클릭 횟수에 따라 업데이트
	});
	 
	return (   // 컴포넌트의 UI를 반환
	<div>
    {/* 현재 클릭 횟수를 표시 */}
	<p>You clicked {count} times</p>
    {/* 버튼 클릭 시 setCount 함수를 호출하여 count를 1 증가시킴 */}
	<button onClick={() => setCount(count + 1)}>
	Click me
	</button>
	</div>
	);
	}
export default Counter; // Counter 컴포넌트를 외부에서 사용할 수 있도록 내보냄

☞	useState : count 상태 관리
	useEffect : count가 변경될 때마다 문서 제목을 업데이트

 

2. 로직의 재사용성

커스텀 Hook을 만들어 여러 컴포넌트에서 재사용 가능하다. (상태관리나 부수 효과 로직)

컴포넌트, 렌더 프롭스 패턴 보다 직관적이고 유연함

 

ex ) 윈도우의 크기를 추적하는 커스텀 hook

function useWindowSize() { // 현재 윈도우 크기를 추적하는 커스텀 훅 정의

   // size라는 상태 변수를 객체 형태로 초기화 (너비와 높이)
	const [size, setSize] = useState({ width: 0, height: 0 });
	 
	useEffect(() => { // 컴포넌트가 렌더링될 때마다 실행됨
	function updateSize() { // 윈도우 크기를 업데이트하는 함수 정의
    
    {/* 현재 윈도우의 너비와 높이를 상태로 업데이트 */}
	setSize({ width: window.innerWidth, height: window.innerHeight });
	}
	window.addEventListener('resize', updateSize); // resize 이벤트 리스너를 추가하여 윈도우 크기 변경 시 updateSize 호출
	updateSize(); // 컴포넌트가 마운트될 때 초기 윈도우 크기를 설정
	return () => window.removeEventListener('resize', updateSize); // 클린업 함수: 컴포넌트가 언마운트될 때 이벤트 리스너 제거
	}, []); // 빈 배열을 전달하여 컴포넌트가 처음 렌더링될 때만 실행됨
	 
	return size; // 현재 윈도우 크기를 반환

• 여러 컴포넌트에서 쉽게 재사용 가능한 코드
  → 로직의 중복 down / 코드 구조 개선 

 

3.  컴포넌트의 생명 주기를 더 세밀하게 제어

• useEffect Hook의 의존성 배열을 통해 특정값이 변경될 때만 부수효과를 실행하도록 할 수 있음
• 클린업 함수를 이용해 컴포넌트가 언마운트되거나 의존성이 변경되기 전에 정리작업을 수행할 수 있음

 

그외 다양한 React Hook

useContext, useReducer, useCallback, useMemo
등으로 복잡한 상황에 대응 가능