함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다.
import Nameing from './nameing'
function App() {
const [nickname, setNickName] = useState('');
const [title, setTitle] = useState('');
const handleNameChange = (e) => {
e.preventDefault();
console.log(e.target.value);
setName(e.target.value);
}
const handleNicknameChange = (e) => {
e.preventDefault();
setNickName(e.target.value);
}
return (
<div className="App">
<input type = "text" name="name" onChange = {handleNameChange}/>
<input type = "text" name ="nickname"
onChange = {handleNicknameChange}/>
<Nameing name = {name} nickname = {nickname}></Nameing>
</div>
);
}
export default App;
input태그로 사용자에게 name, nickname을 입력받고 그것을 state에 저장하며, Naming 컴포넌트에 props로 전달한다.
import React, { useState, useEffect, useMemo } from "react";
const Nameing = ({ name, nickname}) => {
console.log('nameing is rendering');
const nameFunction = (name) => {
let newName = null;
console.log("namefunction 작동중...");
if(name!=="") newName = 'Name : '+ name;
return newName;
}
const nicknameFunction = (nickname) => {
let newNickname = null;
console.log("nicknamefunction 작동중...");
if(nickname!=="")newNickname = "nickname : " + nickname;
return newNickname;
}
return(
<div>
이름은 {nameFunction(name)} 이구요
별명은 {nicknameFunction(nickname)} 입니다.
</div>
)
}
export default Nameing;
props로 받아온 name
의 앞에 'Name : '을 붙여주는 nameFunction
과 nickname
의 앞에 'nickname : '을 붙여주는 nicknameFunction
이 있다. 매우 간단한 코드이다. 이 함수이 return하는 것을 컴포넌트에 렌더링하여 나타낸다. 이 코드를 실행하면 app.js에서 name을 입력받는 input
태그의 내용을 수정하면 nicknameFunction
도 작동하는 것을 알 수 있다. 반대로 nickname input
태그를 수정해도 nameFunction
이 작동한다.
지금은 간단한 코드이므로 애플리케이션의 성능에 큰 영향을 끼치지 않지만 애플리케이션의 규모가 커지고, 만약 nameFunction, nicknameFunction
이 두 개의 함수가 복잡해지고, 엄청난 연산이 필요한 함수였다면 불필요한 함수의 실행으로 성능이 많이 저하될 수 있다.✔
그럼 이제 useMemo
를 사용하여 이것을 해결해보자.
import React, { useState, useEffect, useMemo } from "react";
const Nameing = ({ name, nickname}) => {
console.log('nameing is rendering');
const nameFunction = (name) => {
let newName = null;
console.log("namefunction 작동중...");
if(name!=="") newName = 'Name : '+ name;
return newName;
}
const nicknameFunction = (nickname) => {
let newNickname = null;
console.log("nicknamefunction 작동중...");
if(nickname!=="") newNickname = "nickname : " + nickname;
return newNickname;
}
const user_name = useMemo(()=>nameFunction(name), [name]);
const user_nickname=
useMemo(()=>nicknameFunction(nickname),[nickname]);
return(
<div>
이름은 {user_name} 이구요
별명은 {user_nickname} 입니다.
</div>
)
}
export default Nameing;
위와 같이 useMemo를 이용하면 name이 바뀔 때는 nicknameFunction이 작동하지 않고 nickname이 바뀔 때는 nameFunction이 실행되지 않는다. 따라서 최적화가 이루어졌다.
const user_name = useMemo(()=>nameFunction(name), [name]);
const user_nickname=
useMemo(()=>nicknameFunction(nickname),[nickname]);
두 번째 파라미터는 배열로 이루어지는데, 특정 값이 바뀔때 어떠한 동작이 실행되길 원할 때, 그 특정 값을 배열 안에 넣어주면 된다.
그리고 컴포넌트 return()에는 이렇게 작성한다.
return(
<div>
이름은 {user_name} 이구요
별명은 {user_nickname} 입니다.
</div>
)