React Hook: 함수형 컴포넌트에서 상태와 기능 사용하기

React Hook은 함수형 컴포넌트에서 상태(state)와 다른 React 기능을 사용할 수 있게 해주는 기능입니다. 이 글에서는 React Hook의 개념과 기본적인 사용법에 대해 알아보고, 간단한 예제를 통해 실제로 적용하는 방법을 살펴보겠습니다.

 

React Hook이란 무엇인가요?

• React Hook은 함수형 컴포넌트에서 상태와 생명주기 메서드 등의 React 기능을 사용할 수 있게 해주는 기능입니다. 이전에는 클래스형 컴포넌트에서만 사용할 수 있었던 기능들을 함수형 컴포넌트에서도 사용할 수 있게 해주는 역할을 합니다.

useState Hook:

• useState Hook은 함수형 컴포넌트 내에서 상태를 추가할 수 있게 해줍니다. 이를 통해 컴포넌트의 상태를 관리하고 업데이트할 수 있습니다.
• 예를 들어, 아래와 같이 useState Hook을 사용하여 상태를 추가할 수 있습니다.

import React, { useState } from 'react';

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

    return (
        <div>
            <p>클릭 횟수: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                클릭하세요
            </button>
        </div>
    );
}

export default Example;

728x90

useEffect Hook:

• useEffect Hook은 함수형 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해줍니다. 주로 데이터 불러오기, 구독 설정, 이벤트 리스너 등의 작업을 수행할 때 사용됩니다.
• 예를 들어, 아래와 같이 useEffect Hook을 사용하여 특정 작업을 수행할 수 있습니다.

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

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

    useEffect(() => {
        document.title = `클릭 횟수: ${count}`;
    });

    return (
        <div>
            <p>클릭 횟수: {count}</p>
            <button onClick={() => setCount(count + 1)}>
                클릭하세요
            </button>
        </div>
    );
}

export default Example;

 

사용법 주의사항:

• React Hook은 함수형 컴포넌트의 최상위에서만 호출되어야 합니다. 루프, 조건문, 중첩 함수 내부에서는 호출할 수 없습니다.
• Hook 호출은 항상 같은 순서로 이루어져야 합니다.

React Hook은 함수형 컴포넌트에서도 상태와 생명주기 메서드 등의 React 기능을 사용할 수 있게 해주어 개발자들에게 많은 편의를 제공합니다. useState와 useEffect를 비롯한 다양한 Hook을 통해 코드를 간결하게 유지하고 효율적으로 관리할 수 있습니다.

반응형