Hook
- Class형 component에서만 제공되던 여러 기능들을 함수형 component에서도 이용할 수 있게 하는 기능
- 이전 버전과도 호환되며, 반드시 사용되어야 하는 건 아님.
- 기존의 react 컨셉을 대체하지 않음 -> 기존의 컨셉을 좀 더 직관적인 UI로 표현
- Class 안에서는 사용할 수 없다.
- Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수
useState
함수형 comonent에서 state를 사용할 수 있는 함수
const [count, setCount] = useState(0);
// state값과 이 값을 업데이트하는 함수를 제공class형 component에서의 state와 동일하며, 리렌더링 되어도 값을 유지
useEffect
함수 컴포넌트 내에서 side effects를 수행할 수 있게 해줌
(side effect란 데이터를 가져오거나 구독하고, DOM을 조작하는 동작들)
props, state에 접근 가능
Component가 렌더링된 후에 호출하여 side effect 실행
effect를 해제(ex.unscribe 동작)하려면 해제 함수를 리턴 처리
useEffect(() => {
suscribe()
// 렌더링된 후 호출
return () => unSubscribe()
// unmount 되거나 렌더링 되기 전에 호출
}Class형 component에서는 각각의 생명 주기 마다 필요한 함수를 따로 호출해야했지만 Hook을 사용하면 관련 코드를 한 곳에서 관리
useCallback
memozation된 콜백을 반환하는 hook
const callback = useCallback(() => {
doSomething(a, b)
}
// 반환할 함수 정의
, [a, b]);
// 의존성값을 배열로 정의. 이 값들이 변경될 때마다 함수를 새로 반환배열로 정의한 값들이 변경될 때만 첫번째 인자인 함수를 새로 생성하여 반환. 그 외의 경우에는 memozation된 함수를 반환
불필요한 렌더링을 방지할 때 사용
useMemo
memozation된 값을 반환하는 hook
const value = useMemo(
() => doSometion(a,b)
// 정의된 함수의 결과값을 반환
, [a, b]);
// 의존성값을 배열로 정의. 이 값들이 변경될 때마다 결과값을 새로 계산배열로 정의한 값들이 변경될 때만 결과값을 새로 계산
해당 함수는 렌더링 중에 실행됨에 주의. -> side effect와 같은 작업은 useEffect에서 실행
배열에 값이 없는 경우 렌더링 시 매번 결과값을 새로 생성
useRef
ref 객체를 반환하는 hook
const element = useRef(null);
...
return(
<input ref={element}></input>
)자식 element에 명령적(직접적이라는 의미인듯?)으로 접근하는 경우 사용
useImperativeHandle
부모 component에서 ref에 접근 가능한 hook ?
useLayoutEffect
모든 DOM 변경 후 동기적으로 호출되는 hook
브라우저에 그려지기 전에 호출할 때 사용
useDebugValue
React 개발자 도구에서 custom hook의 레이블을 표시할 때 사용
Hook의 규칙
- 최상위에서만 사용 - 반복분/중첩/조건문 안에서 호출하면 안됨
- React 함수형 component에서만 호출 가능(일반 함수는 아님)
- Custom hook 내에서 호출 가능
