개요
hook을 자주 사용하고있는데,
공식 가이드에서 새롭게 알게된? 인상깊은? 부분들을
기록해두려고 한다.
hook
사용규칙
최상위(at the Top Level)에서만 Hook을 호출해야 합니다
오직 React 함수 내에서 Hook을 호출해야 합니다
✅ React 함수 컴포넌트에서 Hook을 호출하세요.
✅ Custom Hook에서 Hook을 호출하세요.
종속성 목록
(종속성 배열) 배열이 컴포넌트 범위 내에서 바뀌는 값들과 effect에 의해 사용되는 값들을 모두 포함하는 것을 기억해주세요.
종속성 대상은 바뀔수 있는값 전체
(특히 props, state, 여기서 파생된것들)
함수가 들어가는 경우, 렌더링마다 주소값이 달라지므로 새로운 객체이다
(종속성 배열에 들어가면 매번 변화가 있다고 판단됨)
이럴경우 아래의 방법들을 사용하라고 제시했다
- 함수를 effect 내부로 가져와, 여기서 사용된 변수들을 배열에 넣을수도 있고,
- 함수를 컴포넌트 외부로 이동해, props나 state가 사용되지 않았음을 보장할수도있고,
- 함수를 useCallback으로 묶어주어서 종속성 배열에 넣을수도있다
useState
작명규칙 어기면 안돼?
린트에는 안잡히게됨
업데이트 함수가 현재 상태와 정확히 동일한 값을 반환한다면 바로 뒤에 일어날 리렌더링은 완전히 건너뛰게 됩니다.
동일한 값이지만 리렌더링을 시키고 싶다면
강제로 업데이트 시키는 메서드는 없고,
무의미한 다른 상태값을 만들고 변화시켜서 리렌더링을 일으키는 방식이 있다.
고비용의 객체를 지연해서 생성하는 법
//createRows가 모든 렌더링에서 호출
const [rows, setRows] = useState(createRows(props.count));
//createRows가 최초 렌더링에서만 호출
const [rows, setRows] = useState(() => createRows(props.count));
//추가로
// IntersectionObserver는 모든 렌더링에서 생성
const ref = useRef(new IntersectionObserver(onIntersect));
//요렇게 하면 필요할때 체크해서 한번만 생성 가능
const ref = useRef(null);
if (ref.current === null) {
ref.current = new IntersectionObserver(onIntersect);
}
useLayoutEffect
실질적으로 레이아웃 이펙트 언제쓰는지?
화면이 렌더링 되기 전에 처리해야 할것들.
1차 렌더링 후, useEffect로 변경시 깜빡이니까
깜빡이지 않고 표시하고싶은 것들.
사용자가 화면 보기까지 기다려야 하므로 오래걸리지 않는 작업이어야 함.
하지만 서버사이드 렌더링 방식을 이용할때는 useLayoutEffect를 사용할수없다.
useReducer
존재이유? 장점?
내가 느낀 장점은...
별도로 로직을 작성해 분리/재사용 할 수 있다는점?
useDebugValue
custom hook을 만들었을 경우,
react Devtool에서 해당 훅 옆에 어떤 라벨이나 값을 표시할 수 있다.
useImperativeHandle
forwardRef와 함께 사용.
ref.current.XX로 호출하는 자신만의 ref사용 함수를 만들수있다.
custom hook
뭔데?
사용자가 정의하는 hook
왜/언제 써야하는데?
hook을 사용한 반복작업을 줄이고싶다.
-
그냥 컴포넌트 쓰면 안 돼?
-> render 하고싶은거라면, 쓸 수 있으면 써도 됨 -
그냥 js 함수 쓰면 안 돼?
-> hook사용규칙 상, react 컴포넌트거나 custom hook에서만 hook을 사용할 수 있기 때문에 불가능하다
Hook 사용규칙 :
최상단 only,
react component(custom hook)내에서만 사용가능
어떻게 만드는데?
네이밍 룰만 지키고
내부에서 hook을 쓰면 됨
작명
useXxx
1. use로 시작하고
2. 그다음이 대문자로 와야한다
Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 ”use“로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. useSomething이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다.
사용자 정의 Hook의 이름은 “use”로 시작되어야 하나요? 네 그렇습니다. 이 관습은 아주 중요합니다. 이를 따르지 않으면 특정한 함수가 그 안에서 Hook을 호출하는지를 알 수 없기 때문에 Hook 규칙의 위반 여부를 자동으로 체크할 수 없습니다.
네이밍 컨벤션을 지켜야 custom hook으로 인식한다.
(custom hook뿐 아니라 다른hook도 마찬가지)
- 규칙 위반 여부를 체크할수 없는것도 문제이고
- custom hook이 아니라고 분류되면 내부에서 hook을 사용 시 에러가 남
잘 모르고 만들었던 custom hook
- 정상적인 custom hook 함수
정상적인 custom hook의 네이밍 규칙을 깨뜨리면,
더이상 hook이 아닌걸로 인식해서
내부에서 사용한 hook들에 대해 lint에러가 발생한다
- 내부에서 hook을 사용하지 않는데 useXxx로 네이밍한 함수
사실 이건 hook이 아니지만, 딱히 이름을 이렇게 써도 에러가 나지는 않는다.
컨벤션을 헤치고, 다른사람들을 헷갈리게 만들수 있으니 수정이 필요하다
- custom hook은 맞는데, 화면컴포넌트를 객체에 담아서 return
두번씩 렌더링 하는동안 문제가 생김
컴포넌트와 hook으로 분리해서 사용해야 하고
이미 바꿀수 없으면 useCallback으로 묶어주기라도...
