[React] useCallback

useCallback

react에서 컴포넌트가 리렌더링되면 함수들이 새로 다시 만들어집니다. 함수를 선언하고 하는 것은 리소스를 많이 차지하지는 않지만
최적화를 위해서는 props가 바뀌지 않을때 Virtual DOM 에 새로 렌더링을 하지 않고 컴포넌트의 결과물을 재사용하는 부분도 중요합니다.

useCallback 사용법

• Input 값 추적하기

Input.js

	import React, { useState, useCallback } from "react";
	const Input = () => {
	const [value, setValue] = useState('')
	const onChange = useCallback(e => {
	setValue(e.target.value)
	}
	)
	return (
	<>
	<input onChange={onChange}/>
	<p>{value}</p>
	</>
	)
	}
	export default Input;

view raw Input.js hosted with ❤ by GitHub

Input으로 입력받은 값이 변할때마다 컴포넌트는 리렌더링되는데 이럴때마다 함수가 재 선언되면 리소스의 낭비가 생길겁니다. useCallback을 이용해서 함수를 재선언하지않고 재사용 하도록 하였습니다.

 

App.js

	import React from "react";
	import Input from "./Input";
	const App = () => {
	return (
	<Input/>
	)
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

 

실행화면

전체 소스코드는 Github에서 확인 가능합니다

https://github.com/hanhyung6376/learn-react/tree/master/use-callback