React - hooks

 

 

이번 포스팅에서는 react에서의 hooks에 대해 공부해 보려고 한다.

---

 

Hooks

• React의 새로운 기능
• 클래스 컴포넌트에서만 가능했던 state(상태관리)와 lifecycle(라이프사이클)이 함수형 컴포넌트에서도 사용 가능하도록 돕는 기능
• 사용 규칙
  • 최상위 단계에서만 호출 가능(최상위 컴포넌트X)
  • 반복문, 조건문, 중첩된 함수 내부에서 호출X
  • Hook은 React 함수형 컴포넌트 안에서만 호출 가능
  • 커스텀 훅 이름은 "use"로 시작하는 것을 권장함

 

자주 사용되는 Hooks에 대해 간단히 정리한 표는 다음과 같다.

Hooks 종류	설명
useState()	상태 관리를 위한 가장 기본적인 훅
useRef()	ref를 생성하고 관리할 수 있는 훅(DOM 접근, 변수 보존 등)
useEffect()	컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅
useMemo()	메모이제이션을 통해 함수의 리턴값을 재사용할 수 있게 해주는 훅
useCallback()	함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅
useReducer()	복잡한 컴포넌트 상태 로직을 리듀서 함수를 통해 관리할 수 있는 훅
useContext()	리액트에서 전역적으로 접근 가능한 데이터나 함수를 관리하고, 필요한 컴포넌트에서 그 값을 바로 가져와 사용할 수 있게 도와주는 훅
useForm()	form의 상태 관리와 유효성 검사를 간편하게 도와주는 훅

 

 

다른 포스팅들에서 다뤘던 것들을 제외하고 useMemo()부터 살펴보자.

 

useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 react hooks 중 하나이다. 

useMemo()는 언제 사용되는 것일까?

 

리액트에서는 함수형 컴포넌트가 렌더링되면 → 컴포넌트 함수가 호출되고 → 해당 컴포넌트 내부에 있는 모든 변수가 초기화된다. 만약 해당 컴포넌트 안에서 무거운 함수를 호출하고 있다면, 해당 컴포넌트가 렌더링될 때마다 무거운 함수가 반복적으로 호출되어 성능상 굉장히 비효율적이라고 볼 수 있다.

이러한 단점을 극복하기 위해 useMemo를 사용한다. useMemo를 사용하면 함수형 컴포넌트가 렌더링될 때마다 반복적으로 호출되는 무거운 함수를 반복적으로 호출할 필요가 없기 때문이다.

 

useMemo는 처음에 계산된 함수 호출의 결과값을 메모리에 저장해서 해당 컴포넌트가 반복적으로 렌더링이 되어도 이전에 이미 저장된 함수의 결과값을 메모리에서 꺼내와서 재사용하기 때문에 함수를 다시 호출하지 않아도 된다.

 

 

useMemo()

• import { useMemo } from 'react';

• 특정 결과값을 재사용할 때 사용
• 리렌더링 사이의 계산 결과를 캐시
• 함수형 컴포넌트 내부에서 발생하는 연산을 최적화시켜주는 Hook
• Rendering 과정에서 특정 값이 바뀌었을 때만 연산 실행
• 렌더링 과정에서 2번째 인자로 받은 의존배열(dependency) 내 값이 바뀌는 경우에만 첫 번째 인자로 받은 콜백함수를 실행해 구한 값을 반환

 

useMemo 사용시에 주의할 점은, 결과값을 재활용하기 위해 따로 메모리를 소비해서 저장하는 것이므로 필요할 때만 적절히 사용해야 한다. 불필요한 값들을 모두 메모리에 저장해버리면 성능상 좋지 않기 때문이다.

 

 

useMemo와 유사한 Hook으로는 useCallback이 있다.

 

 

useCallback()

• 렌더링 최적화에 사용되는 Hook
• useMemo와 유사함
• 다시 렌더링될 때 함수를 다시 불러오는 것을 막음

 

차이점은 다음과 같다.

 

 

 

useReducer()

• 복잡한 state를 다룰 때 사용하는 hook
• Reducer: 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수
• 4가지 요소
  • 1. state(상태) 2.dispatch(state를 변경시켜달라는 요구)
  • 3. action(dispatch의 내용) 4.reducer(실제로 state를 업데이트시켜주는 매개체)
• 컴포넌트 업데이트 로직을 컴포넌트 외부로 뺄 수 있다는 장점이 있음
• useState()의 대체 함수로 다양한 컴포넌트 상황에 따라 상태값 설정 가능

 

 

 

useForm 샘플 코드

 

useForm()

• React 어플리케이션에서 폼을 쉽게 관리
• 폼의 상태 관리와 유효성 검사를 간편하게 만들어 줌
• 별도로 설치 필요
  • npm install react-hook-form
• register: 입력 요소에 연결하기 위한 함수 → 이 함수를 통해 입력 요소에 유효성 검사 규칙 설정
• handleSubmit: 폼의 제출을 처리하기 위한 함수
  • handleSubmit의 인자로 전달되는 함수는 콜백함수로, 유효성 검사를 통과한 데이터를 인자로 받아 실행
• watch: 특정 폼 필드의 값을 실시간으로 관찰하는 함수
• formState: 폼의 상태를 나타내는 객체
  • errors, isValid, isDirty, isSubmitted

 

 

 

---

참고

https://www.daleseo.com/react-hooks-use-memo/

https://velog.io/@velopert/react-hooks

https://itprogramming119.tistory.com/entry/React-useMemo-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C

https://mjn5027.tistory.com/40