[REACT] React Hooks

* 주요 훅스
1. useStateuse
2. Effectuse
3. Contextuse
4. Reducer
5. useRef

1. useState

useState는 컴포넌트의 상태를 관리하는 훅

 

import React, { useState } from 'react';

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

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

export default Counter;

 

• useState는 상태 변수와 그 값을 업데이트할 수 있는 함수를 반환
• 배열 비구조화 할당을 사용하여 count와 setCount 얻음

 

 

2. useEffect

useEffect는 컴포넌트의 생명주기에서 사이드 이펙트 관리

이 훅은 컴포넌트가 렌더링된 후에 특정 작업을 수행할 수 있게함

 

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

const Timer = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);
    
    return () => clearInterval(interval); // 컴포넌트가 언마운트될 때 클리어
  }, []); // 빈 배열을 전달하면 컴포넌트가 처음 렌더링될 때만 실행됨

  return <h1>Timer: {count}s</h1>;
};

export default Timer;

 

• useEffect 안의 함수는 컴포넌트가 렌더링될 때마다 실행됨. 의존성 배열을 사용해 특정 조건에서만 실행하도록 설정할 수 있음
• 반환되는 함수는 클린업 함수로, 컴포넌트가 언마운트될 때 호출

 

 

3. useContext

useContext는 리액트의 Context API와 함께 사용하여 전역 상태를 관리할 수 있도록 함

 

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

// Context 생성
const MyContext = createContext();

const ChildComponent = () => {
  const value = useContext(MyContext);
  return <h1>{value}</h1>;
};

const ParentComponent = () => {
  return (
    <MyContext.Provider value="Hello from Context!">
      <ChildComponent />
    </MyContext.Provider>
  );
};

export default ParentComponent;

 

 

• createContext를 사용해 Context를 생성하고, useContext를 통해 값 소비.
• Provider를 통해 하위 컴포넌트에 값을 전달.

 

4. useReducer

주로 Redux와 유사한 방식으로 상태를 관리할 수 있게 해줌

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 state;
  }
};

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

  return (
    <div>
      <h1>Count: {state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default CounterWithReducer;

 

• useReducer는 상태와 dispatch 함수 반환, 이를 통해 액션을 보내고 상태를 업데이트할 수 있음
• reducer 함수에서 상태를 어떻게 변경할지를 정의

 

5. useRef

useRef는 DOM 요소에 직접 접근하거나, 상태를 저장할 수 있는 레퍼런스를 생성하는 훅

import React, { useRef } from 'react';

const TextInput = () => {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus(); // DOM 요소에 접근하여 포커스 설정
  };

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

export default TextInput;

 

• useRef는 mutable한 객체를 반환하며, 주로 DOM 요소에 대한 접근이나, 이전 상태를 저장하는 데 사용