[리액트] Hooks 알아보기

 

 

 useState 

상태(state) 관리를 위한 Hook.

함수형 컴포넌트에서 상태 변수와 해당 상태를 업데이트하는 함수를 제공한다.

컴포넌트의 상태를 변경하고, 변경된 상태를 화면에 렌더링할 수 있다.

import React, { useState } from "react";

const Counter = () => {
	//count: 변수,  setCount: 상태 업데이트 하는 함수 
    //=> 배열 비구조화 할당을 통해 각각의 값을 추출해서 사용
	const [count, setCount] = useState(0);
    
    const increment = () => {
    	setCount(counst + 1);
    };

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

 

 

 

 useEffect 

생명주기(lifrcycle) 기능을 사용하기 위한 Hook.

컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있다.

useEffect는 컴포넌트의 마운트, 업데이트, 언마운트 등 다양한 생명주기 단계에서 동작할 수 있다.

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

const Timer = () => {
	const [time, setTime] = useState(0);
    
    useEffect(() => {
    	const interval = setInterval(() => {
        	setTime(prevTime => prevTime + 1);
        }, 1000);
        
        return () => {
        	clearInterval(interval); //클린업(cleanup) 작업. 이전에 설정한 작업 정리
        };
    }, []); 
    //빈 배열([])을 전달함으로써, useEffect 함수가 마운트(initial mount)될 때만 실행되도록 설정
	//빈 배열이므로 의존성(dependency)이 없다는 것을 의미한다.
    //따라서 컴포넌트의 상태나 프로퍼티가 변경되어도 useEffect 함수는 다시 실행되지 않는다.
    
    return (
    	<div>
        	<p>Time: {time}</p>
        </div>
    );
};

 

 useEffect는 컴포넌트가 렌더링될 때마다 실행되는데, 이때 useEffect 함수의 콜백 함수가 실행된다.
그러나 useEffect 함수의 두 번째 인자로 배열을 전달하면, 이 배열에 포함된 값들이 이전 렌더링과 현대 렌더링의 값들과 비교된다. 배열에 포함된 값 중 하나라도 변경된 경우에만 useEffect 함수의 콜백 함수가 실행된다.

만약 두 번째 인자로 빈 배열([])을 전달하면, useEffect 함수의 콜백 함수는 컴포넌트가 최초로 마운트될 때만 실행된다. 즉, 컴포넌트가 처음으로 생성되었을 때 한 번만 실행되고, 그 이후에는 상태나 프로퍼티가 변경되어도 다시 실행되지 않는다. 이를 통해 특정한 작업을 컴포넌트의 최초 마운트 시에만 수행하도록 설정할 수 있다.

 

 

 

 useContext 

컨텍스트(Context)를 사용하기 위한 Hook.

컨텍스트로부터 값을 읽거나 업데이트할 수 있다. 컴포넌트 트리 안에서 전역적으로 데이터를 공유하고 싶을 때 사용된다.

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

//컨텍스트 생성
const MyContext = createContext();

//프로바이더 컴포넌트
const ParentComponent = () => {
	const data = "Hello, Context!";
    
    return (
    	<MyContext.Provider value={data}>
        	<ChildComponent />
        </MyContext.Provider>
    );
};


//컨텍스트를 사용하는 자식 컴포넌트
const ChildComponent = () => {
	const data = useContext(MyContext);
    
    return (
    	<p>{data}</p>
    );
};


//앱 컴포넌트
const App = () => {
	return (
    	<ParentComponent
    );
};

export default App;

 

컨텍스트는 리액트에서 데이터를 컴포넌트 트리를 통해 전달하는 매커니즘을 제공하는 기능이다. 컨텍스트를 사용하면 컴포넌트 간에 명시적인 프로퍼티 전달을 피하고, 중첩된 컴포넌트에서도 데이터를 쉽게 공유할 수 있다.
상위 컴포넌트가 하위 컴포넌트로 데이터를 전달하기 위해서는 프로퍼티를 사용해야 한다. 하지만 컴포넌트 트리가 깊어지면 데이터 전달하기가 번거러워질 수 있다. 이 때 컨텍스트를 사용하면 데이터를 전역적으로 공유하고 필요한 컴포넌트에 접근할 수 있다.

컨텍스트는 크게 두 가지 요소로 구성된다.

1. 컨텍스트 객체(Context Object): 컨텍스트의 상태와 업데이트를 관리하는 객체createContext 함수를 사용하여 생성할 수 있다.
2. 프로바이더(Provider): 컨텍스트의 값을 설정하고 하위 컴포넌트에 전달하는 컴포넌트이다. Provider 컴포넌트는 컨텍스트 객체의 value 프로퍼티를 통해 데이터를 전달한다.

컨텍스트를 사용하기 위해서는 먼저 createContext 함수로 컨텍스트 객체를 생성한 다음, Provider 컴포넌트를 사용하여 값을 설정하고 하위 컴포넌트에서 해당 값을 사용할 수 있다. 하위 컴포넌트에서는 useContext Hook을 사용하여 컨텍스트의 값을 가져올 수 있다.

전역 상태를 유지하고 여러 컴포넌트에서 공유할 수 있는 장점이 있다.
예를 들어 사용자 로그인 상태, 테마 설정, 다국어 지원 등의 데이터를 컨텍스트를 통해 공유할 수 있다.

 

 

 

 useResucer 

리듀서(reducer) 패턴을 사용하기 위한 Hook.

useState와 유사하게 상태(state)를 관리하며, 좀 더 복잡한 상태 관리 시나리오에서 사용된다.

액션(action)을 디스패치(dispatch)하여 상태를 업데이트할 수 있다.

import React, { useReducer } from "react";

const initialState = { count: 0 };

const reducer = (state, action) => {
	switch (action.type) {
    	case "increment":
        	return { count: state.count + 1 };
        case "decrement":
        	return { count: state.count - 1 };
        default:
        	return false;
    }
};

const Counter = () => {
	const [state, dispatch] = useReducer(reducer, initialState);
    
    const increment = () => {
    	dispatch({ type: "increment" });
    };
    
    const decrement = () => {
    	dispatch({ type: "decrement" });
    };
    
    return (
    	<div>
        	<p>Count: {state.count}</p>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
        </div>
    )
}

 

useReducer 구문

const [state, dispatch] = useReducer(reducer, initialState);

• state: 상태 값. 초기 상태는 initialState로 설정된다.
  state는 리듀서 함수에 의해 관리되며, 상태 업데이트에 따라 변경된다.
• dispatch: 상태를 업데이트하기 위해 액션을 발생시키는 함수.
  dispatch 함수를 호출하면 리듀서 함수가 실행되고, 새로운 상태가 결정된다.

 

reducer 함수

const reducer = ( state, action ) => {
    //상태 업데이트 로직을 수행하고 새로운 상태를 반환한다.
}

현재 상태와 액션 객체를 받아서 새로운 상태를 반환하는 역할을 한다. 액션 객체는 상태를 변경하는 데 필요한 정보를 포함하고 있다. 리듀서 함수는 이 정보를 기반으로 상태를 업데이트 하고, 새로운 상태를 반환한다.

 

 

 

 

 useCallback 

콜백 함수를 메모이제이션(memoize)하기 위한 Hook.

콜백 함수가 변경되지 않는한 이전에 생성된 콜백을 재사용할 수 있다.

import React, { useState, useCallback } from "react";

const myComponent = () => {
	const [ count, setCount ] = useState(0);
    
    const increment = useCallback(() => {
    	setCount(prevCount => pervCount + 1);
    }, []);
    
    return (
    	<div>
        	<p>Count: {count}<p>
            <button onClick={increment}>Increment</buttuon>
        </div>
    );
};

 

 

 

 

 

 useMemo 

계산된 값을 메모이제이션(memoize)하기 위한 Hook.

특정 값이 변결될 때에만 계산을 수행하고, 그렇지 않은 경우에는 이전에 계산된 값을 재사용할 수 있게 한다.

import React, { useMemo } from "react";

const MyComponent = () => {
	const expensiveResult = useMemo(() => {
    	//계산 비용이 많은 작업 수행
        return calculateExpensiveResult();
    }, []);
    
    return (
    	<div>
        	<p>Expensive Result: {expensiveResult}</p>
        </div>
    );
};

 

 

 

 

 

  useRef  

가변적인 변수를 생성하거나 기존 요소에 접근하기 위한 Hook.

컴포넌트의 전체 생명주기 동안 유지되는 값을 저장하고, 해당 값에 접근할 수 있다.