[리액트] 기본 개념_React Hooks

참고 도서명 : 리액트를 활용한 프론트엔드 개발 | 저자 : 문하영 

React Hooks: 함수형 컴포넌트의 새로운 시대

React Hooks의 도입 배경	Hooks의 주요 기능
React Hooks는 2019년 React 16.8 버전에서 도입됨 함수형 컴포넌트에 상태 관리와 생명주기 기능을 추가하는 API 클래스 컴포넌트의 복잡성을 해소 → 코드의 재사용성 up 더 간결하고 이해하기 쉬운 코드	함수형 컴포넌트에서도 상태 관리와 생명주기 기능 사용 가능 → 클래스 컴포넌트의 필요성 down 함수형 프로그래밍의 장점을 React 개발에 활용 가능성 up 더 직관적이고 효율적인 코드 작성

 

기본 Hook : useState와 useEffect
useState : 함수형 컴포넌트에서 상태를 관리	useEffect : 컴포넌트의 생명주기와 관련된 부수 효과를 처리
이 두 Hook만으로도 대부분의 클래스 컴포넌트 기능을 대체할 수 있고, 개발자들이 상태와 생명주기를 쉽게 관리할 수 있게함

간단한 카운터 예제

import React, { useState, useEffect } from 'react';

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

    useEffect(() => {
        document.title = `You clicked ${count} times`;
    });

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

• 이 예제에서 useState는 count 상태를 관리하고, useEffect는 count가 변경될 때마다 문서 제목을 업데이트한다.
• 이 코드는 클래스 컴포넌트로 작성했을 때보다 훨씬 간결하고 이해하기 쉽다.

커스텀 Hook의 예시

윈도우의 크기를 추적하는 코드 예시 : 여러 컴포넌트에서 쉽게 재사용 가능 로직의 중복을 줄이고 코드의 구조를 개선함.

function useWindowSize() {
    const [size, setSize] = useState({ width: 0, height: 0 });
    useEffect(() => {
        function updateSize() {
            setSize({ width: window.innerWidth, height: window.innerHeight });
        }
        window.addEventListener('resize', updateSize);
        updateSize();
        return () => window.removeEventListener('resize', updateSize);
    }, []);

    return size;
}

다양한 기본 Hooks

• 기본 Hooks 외에도 useContext, useReducer, useCallback, useMemo 등 다양한 Hook을 제공
• 더 복잡한 상황에서도 Hooks를 효과적으로 사용할 수 있게 해줌.
• Hooks를 조합하여 사용 →  복잡한 상태 관리나 성능 최적화 작업 쉬워짐.

생명주기 제어의 세밀함

• 컴포넌트의 생명주기를 더 세밀하게 제어할 수 있게 해준다.
• useEffect Hook의 의존성 배열을 통해 특정 값이 변경될 때만 부수 효과를 실행하도록 할 수 있다.
• 클린업 함수를 통해 컴포넌트가 언마운트되거나 의존성이 변경되기 전에 정리 작업을 수행할 수 있다.
• 이러한 기능은 개발자들이 컴포넌트의 생명주기를 더 효과적으로 관리할 수 있도록 돕는다.

Hooks의 생태계 변화

• 많은 라이브러리들이 Hooks를 지원하도록 업데이트됨 →  ,Hooks를 기반으로 한 새로운 라이브러리들도 등장.

Redux	useSelector, useDispatch Hooks →  함수형 컴포넌트에서 더 쉽게 사용할수있게 됨
React Router	useParams, useLocation →  라우팅 정보에 쉽게 접근