이번 시간에는 남은 여러가지의 hook에 대해서 개념을 정리하고자 합니다.
1. useCallback()
컴포넌트는 state 데이터가 변경되면, 리렌더링이 일어납니다. 그 때마다
컴포넌트 내부에 있는 함수는 새로 생성하게되고, 불필요한 작업이 일어나게 됩니다. 이럴 때useCallback()을 사용하면, 불필요한 작업은 줄어들게 됩니다.
// useCallback을 import
import React, { useState, useCallback } from 'react';
const App = () => {
const [a, setA] = useState(0);
const [b, setB] = useState(0);
const onClickA = () => {
setA(a + 1);
};
const onClickA = () => {
setB(b + 1);
};
return (
<>
<div> // a 구역
<span>{a}</span>
<button onClick={onClickA}></button>
</div>
<div> // b 구역
<span>{b}</span>
<button onClick={onClickB}></button>
</div>
</>
)
};
export default App;위 코드는 useCallback()이 없는 함수입니다.
a 구역의 버튼을 클릭하면 span안에 있는 {a}의 값이 0에서 1 올라갑니다.
이 때, state의 데이터가 업데이트 되면서 리렌더링이 일어나고,
App컴포넌트 내부의 함수도 또 생성이 됩니다.
// useCallback(fn, deps);
const onClickA = useCallback(() => {
setA(a + 1);
},[a]);
const onClickA = useCallback(() => {
setB(b + 1);
},[b]);첫번째 인수로는 함수, 두번째 인수인 배열에는 의존하는 상태를 꼭 넣어줘야 정상적으로 작동 합니다.
이렇게 작성된 useCallback은 리렌더링이 일어나도 의존된 상태의 값이
변경되지 않으면, 불필요한 생성을 하지 않습니다.
바로 메모제이션된 콜백을 반환하기 때문이다.
2. useMemo
useMemo는 메모제이션된 값을 반환한다.
(리액트 공식문서 참고)
여기서 중요한건 값 !!!
아직까지 useMemo의 실제 사용 빈도수는 적다.
그래서 정확히 어떤 상황에 쓰고, 안쓰고를 판단하는지 약한 것 같아서
공식문서와 여러 블로그의 글을 읽고 개념을 잡으려고 한다.
useCallback() 과 무엇이 다를까?
useCallback()의 내부에 있는 함수를 반환하는 반면에
useMemo는 위 설명처럼 값만 반환하는 hook이다.
어떤 예시가 필요할까 싶다가 간단한 예시를 준비해봤다.
// useMemo import
import React, { useMemo, useState } from "react";
// 1~10까지 더한 값을 return
const carculator = () => {
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 10];
const value = arr.reduce((acc, cur) => {
return acc + cur;
});
// 불려질때마다 콘솔에 출력 확인용
console.log(value);
return value;
};
const App = () => {
const [number, setNumber] = useState(0);
const carcu = carculator();
const onClicknumber = () => {
setNumber(number + 1);
};
return (
<div>
<div>
<span>{number}</span>
<button onClick={onClicknumber}>버튼</button>
</div>
<span>{carcu}</span>
</div>
);
};
export default App;carculator()를 App() 내부에 넣었다.
현재 상태에서 button을 클릭하면 리렌더링이 발생되고,
콘솔창에는 1~10까지 더한 값 46이 매번출력이 된다.
그 말은 carculator()가 매번 계산을 하고 있다는 얘기다.
1~10 더하기 정도야 거의 영향이 없겠지만, 수 많은 데이터를 계산해야할 땐 얘기가 달라진다. 그럼 useMemo를 사용해보자!
// 이렇게만 변경해주면 useMemo 사용된다!!
const carcu = useMemo(() => carculator(), []);이렇게 작성하고, button을 10번 100번을 눌러도 콘솔창에는
첫 렌더링되어 출력된 46 딱 한번이다.
현재 두번째 인수(배열)에 아무런 정보를 넣어주지 않기 때문에 평생 리렌더링이 일어나도 다신 출력될 일은 없다.
혹시 의존하고 있는 데이터가 있을 경우에는 꼭 두번째 인수(배열)에 넣어주자.
useRef
DOM에 접근할 때 쓰이거나,
렌더링에 쓰이지않는 데이터를 저장할 때 쓰이는 hook
여러 블로그를 찾아보니 정말 쓰이는 곳은 많은 것 같았다.
혹시 더 심화된 내용을 보고 싶다면, 여기에서 확인해보세요.
// useRef import
import React, { useRef } from "react";
const App = () => {
// 하단 input 태그에 ref를 const명을 넣어준다.
const input = useRef();
// 클릭 시 연결된 input태그로 focus가 이동된다.
const onClickFocus = () => {
input.current.focus();
};
return (
<div>
<button onClick={onClickFocus}>버튼</button>
<input type="text" ref={input} />
</div>
);
};
export default App;
위 DOM에 접근하는 사용방법은 아주 간단하게 표현을 해보았다.
좀 더 사용방법에 대해서 개념을 잡아보고, 글을 추가 작성 해야될 것 같다!
