[SeSSAC] 웹 풀스택 영등포 5기 과정_REACT(4)_hooks

hooks에 대해,, 적어보도록 하겠습니다..

 

0. Hooks란?

2019년에 React의 16.8버전에서 클래스 컴포넌트에서만 가능했던 

state(상태관리)와 lifeCycle(라이프 사이클)이 가능하도록 만들어준 기능입니다!

 

약간 기능을 낚아채는 개념에서 Hooks라고 불리는 것 같습니다.

 

이 Hooks를 구체적으로 사용하기 이전에 Hooks를 제대로 사용하기 위한

규칙이 있습니다.

 

1. 최상위 단계에서만 호출이 가능하다.
 : 최상위 컴포넌트라는 의미가 아니라 반복문, 조건문, 중첩함수 내부에서 호출하면 안된다.

2. Hook은 오로지 React의 함수형 컴포넌트 안에서만 호출 가능하다.

3. 커스텀 Hook의 이름은 "use"로 시작되길 권장한다.

 

---

1. Hooks의 종류

 

현재 React 18을 기준으로 사용가능한 훅의 종류는 21개 입니다.

useState
useEffect
useContext
useReducer
useRef
useMemo
useCallback
useLayoutEffect
useImperativeHandle
useDebugValue
useTransition
useDeferredValue
useMutableSource
useEvent
usePromise
useAuthentication
useOpaqueIdentifier
useQuery
useQueries
usePaginatedQuery
useInfiniteQuery

저 21개를 전부 알아야하는 것은 아니고 주로 잘 쓰이는 훅 6가지만 정리해보도록 하겠습니다.

 

1-1. useState() : 상태 관리를 위한 가장 기본적인 훅

const [state, setState] = useState(initialState);
// ex) consst [number, setNumber] = useState(0);

 

state: 변수/ 앞으로 변화한 값을 담을 변수

setState: 함수/ 앞으로 state변수가 어떻게 변화할지 함수로 지정함

initialState: state변수의 초기 상태

 

 

1-2. useRef(): 참조(reference)를 생성하고 관리할 수 있는 훅

// 1. 객체 생성
const myRef = useRef(initialValue);

// 2. JSX 내부에서 ref설정
<div ref={myRef}>

// 3. ref를 응용하기
const focusInput = () => {
    myRef.current.focus(); // input 요소에 포커스를 주는 예시
  };
 
 <button onClick={focusInput}>입력란에 포커스 주기</button>

1. 객체 생성

myRef: ref생성함

initialValue: 초기값이며 보통 null로 설정

 

2. JSX 내부에서 ref 설정

어느 DOM의 요소에 ref를 사용할 것인지 설정

 

3. ref를 응용하기

myRef.current 등을 이용하여 다양한 효과 가능

 

1-3. useEffect(): 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅

useEffect(() => {
  // 부작용 함수
}, [의존성1, 의존성2, ...]);

부작용 함수: useEffect 내에서 수행할 작업을 정의함. ex) 데이터가져오기, 상태 업데이트 등

의존성 배열: 배열에 담긴 요소들이 변경될 때만 부작용 함수 작동, 빈 배열 [ ] 일 시, 처음 렌더링에 작용

 

1-4. useMemo(): 메모이제이션을 통해 함수의 리턴 값을 재사용할 수 있게 해주는 훅

const memoizedValue = useMemo(() => {
  // 계산 비용이 높은 연산을 수행하거나 값을 계산
  return 결과값;
}, [의존성1, 의존성2, ...]);

memoizedValue: 메모이제이션된 값 또는 연산 결과가 포함된 변수

계산 비용이 높은 연산: 메모이제이션을 하고자하는 연산 또는 값을 계산하는 함수

의존성 배열: 배열에 있는 값들이 변경될 때만 useMemo함수 재실행

 

=> useState는 상태관리를 위해 사용되고,

     useMemo는 계산에 리소스가 많이 드는 작업을 최소화, 최적화할 때 사용한다.

 

1-5. useCallback(): 함수 자체를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅

const memoizedCallback = useCallback(
  () => {
    // 함수 로직
  },
  [의존성1, 의존성2, ...]
);

memoizedCallback: 메모이제이션된 함수를 저장하는 변수

함수 로직: 메모이제이션하고자 하는 함수를 정의함

의존성 배열: 배열 안에 있는 값들이 변경될 때만 함수가 재실행됨, 

                     빈 배열을 [ ] 쓰면 함수가 렌더링 싸이클 간에 변하지 않고 동일한 인스턴스를 유지함

 

1-6. useReducer(): 복잡한 컴포넌트 상태 로직을 리듀서 함수를 통해 관리할 수 있는 훅

// 1. reducer 함수 정의
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const initialState = { count: 0 };

// 2. 상태와 디스패치 함수 생성
const [state, dispatch] = useReducer(reducer, initialState);

// 3. 디스패치 함수 활용
 const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

 1. reducer함수 정의

state와 action을 인자로 받고, action.type을 dispatch를 사용할 때 미리 지정해준다.

action.type에 따라 state를 어떻게 변경할 지 정해주는 함수이다.

 

2. 상태와 디스패치 함수 생성

 구조분해할당을통해 useReducer에서 state(변수 형태)와 dispatch(함수 형태)를 받는다.

 

3. 디스패치 함수 활용

앞서 선언한 reducer 함수를 사용하기 위해 dispatch를 이용한다.

즉, dispatch를 사용하면 reducer함수가 자동으로 돌아간다고 생각하면 된다.

아까 말했던 action.type을 받기 위해 dispatch에서 인자로 type을 넘겨준다.