[React] Hooks(2)

📍useRef

• useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 
• 컴포넌트의 렌더링과 관련된 사이드 이펙트와 관계 없이 값이 유지한다
• 특정 DOM 요소에 접근이 가능하며 불필요한 재렌더링을 하지 않는다는 장점이 있다. 

import React, { useRef } from 'react';

function MyComponent() {
  const inputRef = useRef(null); // 초기값으로 null을 설정

  const focusInput = () => {
    inputRef.current.focus(); // input 요소에 포커스를 맞춤
  };

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

1.useRef를 사용하여 inputRef라는 참조 객체를 생성하고, <input> 요소에 ref 속성으로 연결한다.
2. focusInput 함수가 호출되면 inputRef.current를 통해 <input> 요소에 직접 접근하여 focus() 메서드를 호출할 수 있다.

 

 

📍useNavigate

• useNavigate는 페이지를 이동할 때 사용된다.
• 특정 이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요한 경우 사용된다.

import React from 'react';
import { useNavigate } from 'react-router-dom';

function LoginPage() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // 로그인
    navigate('/main');
  };

  return (
    <div>
      <h2>Login Page</h2>
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

export default LoginPage;

1. 먼저 react-router-dom으로부터 useNavigate를 import 해온다.
2. useNavigate 훅을 호출해 navigate라는 변수를 만든다. (라우팅함수)
3.로그인 후 /main 경로로 이동한다.
4.로그인 버튼을 생성하고, 버튼이 클릭되면handleLogin함수가 실행되어 /main경로로 이동한다.

 

📍useReducer

• 컴포넌트 내에서 복잡한 상태 관리를 간단하고 효율적으로 할 수 있게 도와준다.
• 특히 여러 상태를 단일 객체로 관리하거나, 상태 변경 로직이 명확히 정의된 액션을 통해 이루어질때 유용하다.

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

state : 상태 이름 (컴포넌트에서 사용할 상태)

dispatch :  상태(state)를 변경 시 필요한 정보를 전달하는 함수

reducer :  dispatch를 확인해서 state를 변경해주는 함수

initialState : state에 전달할 초기 값 (초기 값은 객체, 배열 등 다양한 값으로 전달 가능)

import React, { useReducer } from 'react';

// 1. 리듀서 함수 정의
const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

function Counter() {
  // 2. useReducer를 사용하여 상태 관리
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

export default Counter;

1.리듀서 함수 정의
- reducer 함수는 state와 action을 인수로 받아, 액션의 type에 따라 상태를 어떻게 변경할지를 결정한다.
- increment 타입일 때 state.count 값을 증가시키고, decrement 타입일 때는 감소시킨다.

2. useReducer로 상태와 디스패치 생성
- useReducer를 사용하여 state와 dispatch를 반환받는다.
- state는 현재 상태, dispatch는 상태를 변경할 때 사용한다. ({ count: 0 }을 초기 상태로 설정)

3. 상태 변경:
- dispatch({ type: 'increment' }), dispatch({ type: 'decrement' }) 카운트를 증가,감소시키는 액션을 디스패치하여 상태를 업데이트합니다.