[React] useRef, useReducer

useRef

함수형 컴포넌트에서 ref를 사용할 수 있게 해주는 hook

ref: React에서 DOM 요소에 접근할 수 있는 방법을 제공하는 객체

• React에서는 컴포넌트의 상태나 속성값으로 DOM 요소를 조작하는 것이 일반적입니다. 하지만 때로는 DOM 요소에 직접 접근해야 하는 경우가 있습니다. 예를 들어, 특정 DOM 요소의 위치나 크기를 계산하여 이에 따른 레이아웃 변경을 해야 하는 경우입니다.
  이때 ref를 사용하면, 컴포넌트에서 생성한 객체를 DOM 요소에 할당하여, 이를 직접 조작할 수 있습니다. ref는 일반적으로 클래스형 컴포넌트에서 createRef() 메서드를 사용하여 생성합니다.
• 컴포넌트 내에서 생성한 변수를 저장하고, 변수의 값을 변경할 수 있습니다. 이는 컴포넌트의 상태와는 별개로 동작하며, 변수의 변경이 컴포넌트를 다시 렌더링하지 않습니다.
• useRef는 useEffect와 함께 사용될 때 특히 유용합니다. useEffect에서 이전값과 현재값을 비교해야 할 때, useRef를 사용하여 이전값을 저장하고 비교할 수 있습니다.

useReducer

이 Hook을 사용하면, 상태를 관리하고 업데이트하는 로직을 컴포넌트에서 분리할 수 있습니다.

• setState 메서드와 비슷한 역할을 합니다. 하지만 useReducer는 좀 더 복잡한 로직을 다룰 수 있도록 해줍니다
• useReducer Hook은 배열을 반환하며, 첫 번째 원소는 현재 상태값이고, 두 번째 원소는 상태를 업데이트하는 함수인 dispatch입니다. dispatch 함수는 액션 객체를 인자로 받아, 상태를 업데이트하는 reducer 함수를 호출합니다.

function Example() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  function handleIncrement() {
    dispatch({ type: 'INCREMENT' });
  }

  function handleDecrement() {
    dispatch({ type: 'DECREMENT' });
  }

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

• useReducer Hook은 복잡한 상태 관리 로직을 다룰 때 유용합니다. 예를 들어, 여러 개의 상태값을 조합하여 새로운 상태값을 계산하는 경우나, 비동기 로직을 처리하는 경우에 사용할 수 있습니다.