react의 메모이제이션과 최적화

namoo·2023년 9월 7일

React.memo / useMemo / useCallback

React.memo -> 부모에게 내려받은 프롭스가 변경되더라도 메모로 감싼 자식컴포넌트가 리랜더링 되지않고 기존의 것을 기억
useMemo -> useMemo(() => {},[의존성배열값])복잡한계산 이후의 최종 값을 기억시킨다. 함수의 계산후 리턴값을 기억
useCallback -> useCallback(() => {},[의존성배열값]) 이벤트함수 사용할때 주로사용, 함수의 실행자체를 기억

공통점 - 중복 작업 방지, 최적화를 위한 메모이제이션
복잡한 계산은 useMemo / 이벤트 실행과정 자체 중요 useCallback

React.memo는 언제 사용할까?

Pure Functional Component에서
Rendering이 자주 일어날 경우
re-rendering이 되는 동안 계속 같은 props값이 전달 될 경우
UI element의 양이 많은 컴포넌트의 경우

→ 무조건적인 사용은 지양, 일반적으로 불필요한 Render가 많이 발생하는 곳에서 사용

React.memo 기본형태

const aa = React.memo(component)

React.memo 예시

const Welcome = ({name}) => {

	return <h1> Hello {name} </h1>;

};

export default React.memo(Welcome);

Welcome의 결과를 Memoization해서 이후 props가 변경될때까지 현재 memoized된 내용을 그대로 사용해 리렌더링을 막는다.

useMemo: 함수의 결과값(return값)을 memoized함.

메모이제이션된 값을 반환

useMemo 예시

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedValue = useCallback(computeExpensiveValue(a, b), [a, b]); // 위와 동일

React.memo가 component의 결과 값을 memoized하여 불필요한 re-rendering을 관리한다면,
useMemo는 함수의 결과 값을 memoized하여 불필요한 연산을 관리
함수 호출 이후의 return값이 memoized됨
두번째 파라미터인 배열의 요소가 변경될때 마다 첫번째 파라미터의 callback함수를 다시 생성하는 방식
값이 변화되지 않았을 때 함수의 재호출을 방지

useCallback: 함수를 memoized함.

메모이제이션된 함수를 반환
useCallback은 주로 성능 최적화를 위해 사용

useCallback 예시

const handleChange = useCallback(
	(e) => {setNum(e.target.value)
   }, []
) ;

useCallback을 통해 memoized된 함수는 eventhandler로 사용되며 두번째 인자인 [ ] <- 배열인 요소가 변경될때마다 새로운 함수가 생성된다.

const useCallbackPage = () ⇒ {

const [ name, setName ] = useState(’ ’)
const [ id, setId ] = useState(’ ‘)
const [ phone, setPhone ] = useState(’ ‘)

const hadleChangeInput = useCallback((e) => {
	const { name, value } = e.target;
	name === 'name' ? setName(value)
	: name === 'id' ? setId(value)
	: setPhone(value)
}, [name, id, phone])

return (
	<>
		{* React.memo *}
		<Input label="이름" type="text" value={name} name="name" 
		changeCB={handleChangeInput} />

		{* React.memo *}
		<Input label="아이디" type="text" value={id} name="id" 
		changeCB={handleChangeInput} >

		{* React.memo *}
		<Input label="전화번호" type="text" value={phone} name="phone" 
		changeCB={handleChangeInput} />
	</>
)

}

useCallback(함수, 배열) 구조에서 두번째 인자인 배열에 담긴 값이 변경될 때까지
첫번째 인자인 함수를 저장해놓고 재사용
배열에 상대값을 담아 놓지 않는 경우 상태값이 변화하더라도 함수를 통한 출력값이 변화하지 않을 수 있음

const InputGroupComp = React.memo(({label, type, value, name, changeCB}) => {
	return (
		<div className="input-group">
			<label className="input-labe">
				<p> {label} </p>
			</label>
			<Input className="input-default" type={type} value={value} 
			changeCB={changeCB} name={name} />
		</div>
	)
})

함수의 memoization은 그 함수를 사용하는 컴포넌트의 렌더링 최적화에도 관여
부모 컴포넌트가 렌더링 될 때 마다 부모 컴포넌트의 함수를 담고 있는 자식 컴포넌트도 렌더링
React.memo를 통해 재렌더링 방지

//최적화 useCallback 적용

 const getProducts = useCallback(async () => {
	  const url = "http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline";
    const res = await axios.get(url);
    console.log(res.data);
 }, []);

useEffect(() => {
	getProducts()
},[getProducts])

namoo

신입 개발자 나무!

이전 포스트