[새싹 x 코딩온] 웹 풀스택 영등포 5기 12주차 회고 - 2

📌 Hooks

클래스 컴포넌트에서만 가능했던 state(상태관리)와 lifecycle(라이프사이클)이 가능하도록 돕는 기능 → 함수형 컴포넌트에서도 사용 가능

• React의 새로운 기능
  • React 훅은 2018년 10월에 React 컨퍼런스에서 처음으로 소개됨
  • 2019년에 React의 16.8 버전에서 공식적으로 소개되고 사용됨

📣 사용 규칙

• 최상위 단계에서만 호출 가능
  • 최상위 컴포넌트 X
  • 반복문, 조건문, 충첩된 함수 내부에서 호출하면 안됨!
• 오직 React 함수형 컴포넌트 안에서만 호출 가능
• 커스텀 훅의 이름은 "use"로 시작 (권장 사항)

📣 종류

• useState() : 상태 관리를 위한 가장 기본적인 훅
  • useState 블로깅
• useRef() : 참조(reference)를 생성하고 관리할 수 있는 훅
  • DOM 접근, 변수 보존 등
  • useRef 블로깅
• useEffect() : 컴포넌트가 랜더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅
  • useEffect 블로깅

🟠 useMemo()

• 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 시켜줌
• 메모이제이션으로 수행한 연산의 결과 값을 기억함으로써 함수의 리턴 값을 재사용할 수 있게 해주는 훅
  • 렌더링 과정에서 특정 값이 바뀌었을 때만 연산을 실행함

메모이제이션 이란?
컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

const memoizedValue = useMemo(callback, dependency);

• 렌더링 과정에서 의존 배열(dependency) 내 값이 바뀌는 경우에만 콜백함수를 실행해 구한 값을 반환

function calc(a,b) {
  return a + b;
}

// 함수형 컴포넌트
const MyComponent() {
  const result = calc(3,5);
  
  return <p>{result}</p>
}

• 사용 이유
  • 컴포넌트가 렌더링 됨 = 함수 호출 → 함수 내부 모든 변수 초기화
  • 리렌더링 될 때마다 MyComponent 호출
  • 변수 result가 초기화되므로 매번 calc 함수 실행
    → useMemo를 사용하여 부하가 걸리는 함수의 결과값을 메모리에 저장, 리렌더링이 될 때 그 결과값만 가져와서 재사용함으로써 성능을 최적화!

🟠 useCallback()

• Rendering 최적화에 사용되는 Hook API
• 함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅 → useMemo와 유사
  • useMemo에서는 값을 최적화 시켰지만, useCallback은 리렌더링 될 때마다 함수를 다시 불러오는 것을 막음
• 컴포넌트가 리렌더링 되어도, 의존성 배열에 있는 값이 바뀌지 않는 한 기존 함수를 재사용
  

const memoizedCallback = useCallback(callback, dependency);

const onClick = useCallback(e => {
  e.preventDefault();
  setNumber(number + 1);
}, [number]),

🟠 useReducer()

• 복잡한 컴포넌트 상태 로직을 리듀서 함수를 통해 관리할 수 있는 훅

  Reducer 란?
  현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수

const [state, dispatch] = useReducer(reducer, initialState);
// state : 현재 상태
// dispatch : 액션을 발생시키는 함수
// reducer : state를 업데이트하는 함수
// initialState : 상태의 초기값

• 장점
  • 컴포넌트 업데이트 로직을 컴포넌트 외부로 뺄 수 있음
• useReducer은 useState의 대체 함수로 다양한 컴포넌트 상황에 따라 상태값을 설정할 수 있음

import React, { useReducer } from 'react';

const initState = { value : 0 }; // 초기 상태값

// 3. Reducer - 현재 state와 action 값을 전달받아 새로운 state 반환
const reducer = (prevState, action) => {
  // action : {type: xxx}
  switch (action.type) {
    case 'INCREMENT':
      return { value: prevState.value + 1 };
    case 'DECREMENT':
      return { value: prevState.value - 1 };
    case 'RESET':
      return initState;
    default:
      return {value: prevState.value};
  }
};

export default function UseReducerEx() {
  // reducer: state를 업데이트 하는 함수
  // dispatch : 액션(state가 어떻게 변경되어야 하는지에 대한 힌트)을 발생시키는 함수
  // state : 현재 상태
  
  // 1. Reducer 정의
  const [state, dispatch] = useReducer(reducer, initState);
  
  // 2. dispatch 함수로 action 값 전달 - dispatch는 action 값을 받아 state와 함께 3으로 전달
  const increment = () => dispatch({ type: 'INCREMENT' });
  const decrement = () => dispatch({ type: 'DECREMENT' });
  const reset = () => dispatch ({ type: 'RESET' });
  
  return (
    <div>
    	<h1>{state.value}</h1>
    	<button onClick={increment}>Plus</button>
    	<button onClick={decrement}>Minus</button>
    	<button onClick={reset}>Reset</button>
    </div>
  );
}

useState() vs. useReducer()

• useReducer()가 useState() 기반이라고 해서 더 좋은 것은 아님
• 상황에 따라 유동적으로 선택
  • state가 단순하면 → useState()를 사용
  • state가 복잡하면 → useReducer()를 사용 (객체, 배열 같이 하위 요소가 많은 경우)

더 많은 Hooks를 알고 싶다면?
https://react.dev/reference/react

📣 Custom Hooks

• 컴포넌트에서 반복되는 로직이 많을 때 custom hooks를 이용하면 편리
  → 컴포넌트 분할과 달리 컴포넌트 로직 자체를 분할하거나 재사용 가능
• 보통은 hooks/ 디렉토리 안에 커스텀 훅을 정의하여 사용
  • use로 시작하는 파일을 만드는 것이 관례
  • ex. useScroll.js, useToggle.js 등