useMemo()
UseMemo 참고문서 - https://react.vlpt.us/basic/17-useMemo.html
해당 변수가 state 로 인해 리렌더링으로 계속 선언될때 자원낭비를 최소화 하기위해 사용.
"memoized" 를 의미하고 이전 계산 값을 재 사용 한다는것을 의미
임포트방법 : import React, { useMemo } from "react";
const count = useMemo(() => countActiveUsers(users), [users]);
를 이용해 웹사이트가 리렌더링 되었을 때 users 가 바뀌었을 경우 해당 함수 실행, 아니면 함수를 실행하지 않고 이전 값 재사용
const count 는 countActiveUsers(users) 함수의 return 값을 가지며 JSX 에 {count} 를 넣어 값을 사용하면 됩니다.
useCallback()
UseCallback 참고문서 - https://basemenks.tistory.com/238
React는 함수마저 리렌더링 될때마다 새로 리렌더링됩니다. 하지만 함수의 의존값이 바뀌지않으면 기존 함수를 계속 반환합니다.
useMemo 는 변수를 반환 , useCallback 은 함수를 반환합니다.
함수 메모이제이션 첫번째 값에는 함수를 두번째 인자는 넘어온 배열 값을 넣어줍니다.
useMemo와 같이 [배열] 값이 바뀐 경우에만 함수를 반환합니다.
기본 문법 :
const memoizedCallback = useCallback(함수, 배열);
활용 예제:
const callbackfunc = useCallback(() => x + y, [x, y]);
callbackfunc() // Callback이 관리하는 함수 실행 (x나 y값이 바뀌어야 실행됩니다.)x 또는 y 값이 바뀌면 함수 새로 호출 , 그대로 일경우 재사용
But~
단순히 컴포넌트 내에서 함수를 반복해서 생성하지 않기위해 사용하는것은 큰 이점은 아니다.
input으로 값이 계속 렌더링될때 useMemo() 와 useCallback() 를 이용합니다.
useCallback 은 새로운 함수를 반환합니다.
실제로 두 함수는 다른 메모리의 함수이며, 생김새만 다른 함수입니다.
Memo -- 변수를 반환 (결과값이 변수로 사용되는곳에 사용해)
Callback -- 함수를 반환 (결과값이 함수로 사용해야 하는곳에 사용해)
useRef()
UseRef 참고문서 - https://mnxmnz.github.io/react/what-is-use-ref/
-Dom을 선택하거나 ,
-컴포넌트 안에 변수 만들때 사용합니다. ( 일반변수는 새로고침해야 값이 변경되지만 , ref는 리렌더링 되지 않고 참조 가능하다.! )
setTimeout, setInterval을 통해서 만들어진 id
외부 라이브러리를 사용하여 생성된 인스턴스
scroll위치
와 같은 변수를 관리합니다.
-리렌더링 방지합니다. (state 로 관리하는 props은 바뀐다!)
ㄴ 컴포넌트는 state 나 props 이 바뀔 때 리렌더링 됩니다.
useRef 로 관리하는 변수는 값이 바뀐다고 해도 리렌더링이 되지 않습니다.
Dom 접근
<input
name="name"
placeholder="이름"
onChange={onChange}
value={name}
ref={nameInput}
/>의 Dom을
const nameInput = useRef()
nameInput.current.focus() // 이 변수로 해당 input에 focus를 맞추고 접근 가능합니다.
const onChange = e => {
const { value, name } = e.target;
setInputs({
...inputs,
[name]: value,
});
};여러 입력 받을때 이렇게 써보자.
변수 사용
변수로 사용해보자
const nextId = useRef(4);
위의 초기 변수를 설정합니다.
nextId.current += 1;
변수값을 변경할 때 current 로 값을 변경시켜줍니다.
id: nextId.current <-- 값 대입
리렌더링 방지
활용예제:
밑의 코드에 input 태그에 onchange 함수로 state 를 계속 변경하면 페이지가 계속 리렌더링되면서 '리렌더링' 콘솔을 계속 출력합니다.
const [text , settext] = useState('');
const onchange = (e) => {
settext(e.target.value);
}
console.log('리렌더링');
const gogogogo= () => {
console.log(text);
}밑의 코드로 ref 속성에 useRef를 주어 input 입력할때마다 페이지가 리렌더링 되는것을 막아줍니다.
const usernameRef = useRef('');
const onCreate = () => {
const user = {
id: nextId.current, // useRef로 변수설정
username: usernameRef.current.value, // useRef 로 새로고침 방지
email: emailRef.current.value, // useRef 로 새로고침 방지
};<input name="username" placeholder="계정명" ref={usernameRef} />usernameRef.current.value 는 input에 ref 태그로 설정되어있는 값을 가지고옵니다.
React.memo
React.memo 는 props 가 바뀌지 않으면 , 리렌더링을 방지하는 함수입니다. 사용법은 코드 하나를 추가로 입력해 주면 됩니다.
import React from 'react';
Const Memos = () => {
...codes
}
export default React.memo(Memos); // 해당 구간 주목export default 구간에 React.memo를 감싸줬습니다. 부모 컴포넌트에서 State 로 리렌더링 된다 하더라도 props 이 변경되지 않았으면 위의 코드는 리렌더링되지 않습니다.
