REACT HOOK

 React Hook

 1. Hooks 소개 및 기본 개념

 주요 개념 설명
- Hooks는 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있도록 하는 기능입니다. 클래스 컴포넌트 대신 함수형 컴포넌트를 더 유연하고 간단하게 사용할 수 있게 해줍니다.
- 기본 규칙: 
  - Hook은 함수형 컴포넌트의 최상위에서만 호출해야 합니다.
  - 조건문이나 반복문 내부에서는 Hook을 호출하면 안 됩니다.
  - `use`라는 접두어로 시작해야 하며, 함수형 컴포넌트나 커스텀 Hook 내부에서만 사용할 수 있습니다.

사용 시나리오
- 상태 관리: 컴포넌트 내의 상태를 관리할 때 `useState`를 사용합니다.
- 라이프사이클 관리: 특정 이벤트나 데이터 변경 시 효과를 주거나, 구독을 관리할 때 `useEffect`를 사용합니다.
- 참조 및 DOM 접근: DOM 요소에 직접 접근하거나 값이 유지되어야 할 때 `useRef`를 사용합니다.
- 전역 상태: 컴포넌트 간에 전역 상태를 공유할 때 `useContext`를 사용합니다.

---

 2. 주요 Hooks: `useState`, `useEffect`, `useRef`, `useContext`

 2.1 useState
- 설명: `useState`는 상태를 선언하고, 상태를 업데이트하는 함수(`setState`)를 반환합니다.
- 사용 시나리오: 사용자 입력을 저장하거나, 클릭 횟수와 같은 값을 관리할 때 유용합니다.

예시 코드

import React, { useState } from 'react';

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

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

export default Counter;

2.2 useEffect
- 설명: `useEffect`는 사이드 이펙트(예: 데이터 페칭, 구독 설정, DOM 조작 등)를 처리할 때 사용됩니다. 컴포넌트가 렌더링될 때, 그리고 의존성 배열에 지정한 값이 변경될 때 호출됩니다.
- 사용 시나리오: 데이터 페칭, 구독 설정, 상태가 바뀔 때 외부 API 호출 등이 필요할 때 유용합니다.

예시 코드

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

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(prevSeconds => prevSeconds + 1);
        }, 1000);

        return () => clearInterval(interval); // 컴포넌트가 언마운트 될 때 정리
    }, []);

    return <p>Seconds: {seconds}</p>;
}

export default Timer;

2.3 useRef
- 설명: `useRef`는 컴포넌트의 DOM 요소에 접근하거나, 렌더링에 영향을 주지 않고 값을 유지하는 데 사용됩니다.
- 사용 시나리오: 포커스 제어, 컴포넌트의 이전 상태를 기억해야 할 때 유용합니다.

예시 코드

import React, { useRef } from 'react';

function TextInput() {
    const inputRef = useRef();

    const handleFocus = () => {
        inputRef.current.focus();
    };

    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={handleFocus}>Focus Input</button>
        </div>
    );
}

export default TextInput;

2.4 useContext
- 설명: `useContext`는 React의 Context API와 함께 사용되어, 전역 상태를 쉽게 사용할 수 있도록 합니다.
- 사용 시나리오: 사용자 인증 정보나 테마 정보와 같이 여러 컴포넌트에서 공유해야 하는 데이터를 전달할 때 유용합니다.

예시 코드

import React, { useContext, createContext } from 'react';

const ThemeContext = createContext('light');

function ThemeDisplay() {
    const theme = useContext(ThemeContext);
    return <p>Current Theme: {theme}</p>;
}

function App() {
    return (
        <ThemeContext.Provider value="dark">
            <ThemeDisplay />
        </ThemeContext.Provider>
    );
}

export default App;

---

3. 커스텀 Hook 만들기

주요 개념 설명
- 커스텀 Hook은 개발자가 재사용 가능한 상태 관리 로직을 정의할 수 있도록 도와줍니다. `use`로 시작하는 함수를 정의하여 다른 컴포넌트에서 사용할 수 있습니다.

사용 시나리오
- 공유된 로직: 여러 컴포넌트에서 동일한 상태 관리 로직이 필요할 때 커스텀 Hook을 사용해 코드를 재사용하고 간결하게 유지할 수 있습니다.

예시 코드
- useFetch: API 호출을 처리하는 커스텀 Hook

import { useState, useEffect } from 'react';

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch(url)
            .then(response => response.json())
            .then(data => {
                setData(data);
                setLoading(false);
            });
    }, [url]);

    return { data, loading };
}

// 사용 예시
import React from 'react';

function DataDisplay() {
    const { data, loading } = useFetch('https://jsonplaceholder.typicode.com/posts');

    if (loading) return <p>Loading...</p>;

    return (
        <ul>
            {data.map(post => (
                <li key={post.id}>{post.title}</li>
            ))}
        </ul>
    );
}

export default DataDisplay;

---