UserMemo
UseMemo란?
Memoized value를 리턴하는 Hook이다.
Memoization이란? : 최적화를 위해서 사용한다.
- 정리하면, 연산량이 많이 드는 함수의 호출결과를 저장해 두었다가 같은 입력값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해 놨던 호출 결과를 바로 반환한다.
- 결과적으로 함수호출결과를 받는데 시간을 단축시킬 수 있다.(자원을 적게쓴다)
- Memoization의 결과를 Memoized Value 라고 한다.
- 메모이제이션의 개념처럼 의존성 배열에 들어있는
변수가 변했을 경우에만 새로 create함수를 호출하여 결과값을 반환한다. 그렇지 않을 경우에는 기존의 사용하던 결과를 내보낸다.
-
서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업 등은 렌더링이 일어나는 동안 발생하면 안 되기 때문에
useMeMo에 넣으면 안 된다. -
useMemo 훅에 의존성 배열을 넣지 않으면 아무런 의미가 없다.
-
빈 배열을 주면 마운트 이후에는 값이 변경되지 않는다.
-
대부분의 경우에는 useMemo훅에 의존성 배열의 변수들을 넣고 해당 변수들의 값이 바뀜에 따라 새로 값을 계산해야 할 경우에 사용한다.
useCallback()
-
useMemo()와 유사하지만 값이 아닌 함수를 반환한다.
- 컴포넌트가 렌더링 될 떄마다 매번 함수를 새로 정의하는 것이 아니라, 의존성 배열의 값이 바뀐 경우에만 함수를 새로 정의해서 리턴해준다.
- 의존성 배열에 있는 변수 중 하나라도 변경되면 메모이제이션된 콜백함수를 "반환"한다.
useRef()
-
Reference를 사용하기 위한 Hook이다.
-
특정 컴포넌트에 접근할 수 있는 객체이다. (래퍼런스 객체를 반환한다)
-
파라미터로 초기값을 넣으면 해당 초기값으로 초기화된 래퍼런스 객체를 반환한다.
-
만약 초기값이 null이라면 current의 값이 null인 레퍼런스 객체가 반환된다.
정리하면, useRefHook은 변경 가능한 current라는 속성을 가진 하나의 상자이다.
import React, { useRef } from "react";
function TextInputWithFocusButton(props) {
const inputElem = useRef(null);
const onButtonClick = () => {
inputElem.current.focus();
};
return (
<>
<input ref={inputElem} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
// 버튼 클릭시 input에 포커스를 하는 코드이다. 초기값으로 null이 들어간다.
// 결과로 반환된 inputElm이라는 래퍼런스 객체 input에 넣어줬다.
// 버튼 클릭시 호출되는함수에서 inputElm.current를 통해 실제 엘리먼트에 접근하여 포커스 함수를 접근한다.
// useRef() Hook은 내부의 데이터가 변경되었을 때 별도로 알리지 않는다.
}
export default TextInputWithFocusButton;
-
버튼 클릭 시
-
onButtonClick실행 -
onButtonClick을 통해 inputElm.current.focus()를 통해 실제 엘리먼트에 접근한다.
- inputElm.current.focus() = Focus the input이다.
- inputElem이 참조하는 DOM 엘리먼트에 포커스가 맞춰진다.
- 이 값이 ref 참조객체를 앞에서 정의했기 때문에
- ref = {inputElem}엔 Focus the input이 들어간다.
import React, { useState, useCallback } from "react";
function MeasureExample(props) {
const [hight, setHight] = useState(0);
const measuredRef = useCallback((node) => {
if (node != null) {
setHight(node.getBoundingClientRect().height);
}
}, []);
return (
<>
<h1 ref={measuredRef}>안녕,리액트</h1>
<h2>위 헤더 높이는 {Math.round(height)}px입니다.</h2>
</>
);
}
export default MeasureExample;
-
자식 컴포넌트가 변경되었을 떄 알림을 받을 수있다. 다른 정보를 업데이트 할 수 있다.
-
h1 태그의 높이 값을 매번 업데이트 하고 있다.
-
의존성 배열로 []을 넣었는데, mount, unmount 될 때만 콜백함수가 호출되며 재랜더링이 일어 날때 (새로고침) 때는 호출되지 않는다.
