[React] Hook

Hook의 규칙

• 무조건 최상위 레벨에서만 호출해야 한다.
  • 반복문 조건문 중첩된 함수 안에서 호출하면 안됨
• 렌더링될 때마다 매번 같은 순서로 호출되어야 한다.
• 리액트 함수 컴포넌트에서만 hook을 호출해야 한다.

eslint-plugin-react-hooks(hook의 규칙을 따르도록 도와주는 플러그인)

---

useEffect 함수란?

리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다

 

useEffect(이펙트 함수, 의존성 배열) 

• 의존성 배열 - 배열 값이 변경되면 이펙트 함수 실행(생략 가능
  • 빈 배열로 넣을 경우 : mount.unmount 한 번씩만 실행됨
  • 의존성 배열을 생략한다면 컴포넌트 업데이트 될 때마다 실행
  • useEffect 내의 의존성 배열이 없을 경우 클린업 함수가 실행되지 않는다.
• 이펙트 함수 - 처음 컴포넌트 랜더링, 업데이트 이후 랜더링될 때 실행
• return 함수는 컴포넌트가 unmount 될 때 호출됨(ComponentWillUnmount() 역할과 동일)

 

Memoization - 메모해두었다가 나중에 다시 실행

useMemo() 함수란?

연산량이 높은 작업을 수행하여 결과를 반환 - 빠른 랜더링 속도

랜더링이 일어나는 동안 실행됨

 

의존성 배열을 넣지 않을 경우 랜더링마다 함수가 실행됨(아무 의미 없음)

빈 배열을 넣을 경우 마운트 시에만 호출 됨, 마운트 이후 값이 변경되지 않음

 

create함수와 의존성 배열을 받음

 

useCallback()

memo와 유사하지만 값이 아닌 함수를 반환

함수, 의존성 배열

 

useCallback(함수, 의존성 배열);
useMemo(() => 함수, 의존성 배열);
두가지 모두 동일한 기능을 함

 

useRef()

reference를 사용하기 위한 Hook

refObject.current - 변경 가능한 current를 가진 하나의 상자

 const refContainer = useRef(초기값);

 

내부 데이터가 변경되었을 때 별도로 알리지 않는다

Callback ref를 사용해 변경되었는지 알림을 받을 수 있음 - 재랜더링할 때는 호출되지 않는다

 

---

Custom Hook

이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 자바스크립트 함수

 

특별한 규직은 없으며 단순한 함수와 같지만, reacthook이라는 것을 나타냄

여러 개의 컴포넌트에서 하나의 custom hook을 사용할 때 컴포넌트 내부에 있는 모든 state, effects는 전부 분리되어 있다.

(분리된 State를 얻게 됨)

 

 

 

 

Reference

https://www.inflearn.com/course/lecture?courseSlug=%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8&unitId=113224&tab=curriculum

학습 페이지