useReducer 와 useRef, state 에 대한 고찰.

useReducer is a built-in hook in React that allows you to manage state in your functional components using a reducer function, which is similar to the way state is managed in Redux.

Here's how it works:

1. You define a reducer function that takes in a current state and an action and returns a new state based on the action.
2. You use the useReducer hook to initialize the state and get a dispatch function to update the state based on actions.
3. You dispatch actions to update the state, and the useReducer hook calls the reducer function with the current state and the action to calculate the new state.

Here's an example of using useReducer:

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

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

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

In this example, we define a reducer function that takes in a state object and an action object, and returns a new state object based on the action. We also define an initialState object to be used as the initial state when the component is first rendered.

 

We then use the useReducer hook to initialize the state to initialState and get a dispatch function to update the state based on actions. We can then use the dispatch function to dispatch actions to update the state.

 

In the Counter component, we render the current count from the state, and two buttons that dispatch the increment and decrement actions when clicked. When an action is dispatched, the useReducer hook calls the reducer function with the current state and the action to calculate the new state, and updates the state and re-renders the component.

 

Then, what about useRef?

On the other hand, useRef is used to create a mutable reference that persists across re-renders of the component. The useRef hook returns an object with a current property that can be used to store and access the current value of the reference. The value can be updated by modifying the current property of the reference.

import React, { useRef } from 'react';

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

  function handleButtonClick() {
    inputRef.current.focus();
  }

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

In this example, we create a ref using useRef and attach it to an input element using the ref attribute. We also create a button that, when clicked, calls a function that focuses the input element by accessing the current property of the ref.

In summary, useReducer is used to manage state using a reducer function, while useRef is used to create a mutable reference that persists across re-renders of the component.

 

What about state?

https://www.youtube.com/watch?v=G3qglTF-fFI