리액트 내장 훅 10가지.
useRef
ref 객체는 돔 요소를 참조할 때만 사용 할 수 있는것은 아니다. 이 전 글을 보면 알 수 있음. const ageRef = useRef(10) 이라고 했을때, 그 값이 저장이된다. 이것은 ageRef.current = 10 과 같다고 볼 수 있다. 즉, 돔 요소 참조 뿐만아니라 어떠한 값을 저장할 수 있음!
상태값 변경이 렌더와 상관이 없거나, 다음과같이 부수효과 함수를 이용할 필요가 있을때는 위와 같은 코드로 작성하는것이 좋다. useEffect는 렌더링 된 후 에 호출이 된다. 그러므로 위와 같은 코드를 작성하면 이전 값을 기반으로 처리 할 수 있다. (이전값과 현재값을 비교하고싶을때 사용하면 좋다. 부수함수효과(useEffect)는 렌더가 된후 반영되기때문에 값을 저장하면 이전값과 현재값(state)을 비교하기 좋다.)
useMemo
useMemo 훅은 계산량이 많은 함수의 반환값을 재활용하는 용도로 사용된다.
useMemo 훅의 첫번째 매개변수로 함수로 입력했다. 입력한 함수는 의존성 배열 [v1,v2]값중 하나라도 변경되면 그때 실행하게 된다. [v1,v2]가 변경되지 않았다면 이전에 실행해서 저장했던 값(메모이제이션)을 재활용함.
useCallback
useCallback같은 경우는 함수에 특화된 메모이제이션 기능을 갖고있다고 생각하면된다. 아래 UserEdit컴포넌트에 memo를 사용했음에도 불구하고 변경된 값이 없는데 계속 렌더링되고있다. 이는 render될때 새로운 함수가 만들어져서 전달되기때문에 불필요한 로그가 출력되는것이다.
이럴때 useCallback을 사용하면 되는데
변경된부분=>
++ const onSave = useCallback(() => saveToServer(name, age), [name, age]);<UserEdit onSave={onSave} setName={setName} setAge={setAge} />
uscCallback도 의존성 배열로 관리하는데 위처럼 name,age가 변경될때만 새로운 함수가 생성되도록 작성하면된다.
useReducer
여러개의 상태값을 관리할때는 리듀서훅을 사용하는게 좋다.
name과 age를 표시해주는 p태그 2개가있고, 이름과 나이를 입력해주는 input창이 아래에 두개 있다. 이름을 입력하면 이름이 표시되고, 나이를 입력하면 나이가 표시되는데 나이가 50 을 초과하면 자동적으로 50을 표시해주게 제한을 걸어뒀다. 아래 코드가 있다.
위쪽에는 대입할 변수들이 적혀있고, 아래에는 App컴포넌트가있다. 컴포넌트에 useReducer함수를 보면 useState와 비슷하게 상태값인 state가 있고, 상태값을 변경할 수 있는 dispatch가 있다. 매개변수에는 reducer라는 함수가있고, 초깃값이 존재한다. reduecer함수를 보면 현재 상태값과 action이 입력되고 action을 보고 상태값을 어떻게 변경할지 정하게된다. input에서는 dispatch를 호출하고 객체형식으로 입력을하면 이 값이 그대로 reducer함수의 매개변수인 action으로 들어오게된다. 리듀서를 이용하면 상태값을 변경하는 로직을 분리할수있다. 앞서 익혔던 context API를 이용하면 useReducer를 통해 트리의 깊은곳 까지 쉽게 값을 전달해 상태값 관리가 더 편해진다. 하지만 리덕스같이 상태값을 관리해주는 라이브러리가 더 많은 장점을 가지고있다.
useImperativeHandle
클래스형의 부모컴포는트는 ref객체를 통해서 자식컴포넌트의 메서드를 호출 할 수 있는데, 함수형 컴포넌트에서도 멤버변수나 멤버함수가 있는것처럼 useImperativeHandle을 이용하여 만들 수 있다.
useLayoutEffect
useEffect훅에 입력된 부수효과 함수는 렌더링 결과가 돔에 반영된 후에 비동기로 호출이 된다. useLayouEffect훅은 useEffect와 비슷하지만 부수효과 함수를 동기로 호출한다는 점이 다르다. 즉 useLayouEffect 훅은 렌더링결과가 돔에 반영된 직후에 바로 호출이 된다.(useLayouEffect훅의 부수효과 함수에서 연산을 많이하면 브라우저가 느려질 수 있음.) useLayouEffect을 사용할때는 언제일까? 렌더링 직후에 돔 요소의 값을 읽어들이는 경우, 조건에 다라서 컴포넌트를 다시 렌더링 하고 싶은 경우 적합하다.
useDubegValue
useDubugValue에서 제공한 값을 통해서 디버깅시 편리하다 react developer tool이 설치되어있어야 한다.
