useMemo 와 마찬가지로 Component 함수 안의 calculate 는 useCallback으로 싸여싰어서
일단 실행이 되면 하번 전체적으로 실행이 되고 그다음에는 caculate 함수가 dependency array 의 값의
변화에 따라 함수가 랜더링이 된다.
const someFunction = () => {
console.log(`someFunc : number : ${number}`);
return;
};
useEffect (()=> {
console.log('sumeFunction 이 변경 되었습니다.')
},[someFunction]);
useEffect 를 사용하여 console 값이 1번 만 나오는 줄 알았는데, 버튼을 누르면 someFunction으로 가고 여기에 number 변수가 있어 값의 주소가 someFunction 으로 가고 여기서 numer 가 있기 때문에 계속 랜더링이 된다.
const someFunction = useCallback(() => {
console.log(`someFunc : number : ${number}`);
return;
},[]);
useEffect (()=> {
console.log('sumeFunction 이 변경 되었습니다.')
},[someFunction]);
input 에 숫자 5를 입력하고 Call someFunc 버튼을 눌러도 콘솔 창에는 그대로 0 으로 되어 있다. 그 이유는 처음 시작 했을때 초기 값인 0이 memorization 되어 있었기 때문에 계속 0이 나오는 것이다.
const someFunction = useCallback(() => {
console.log(`someFunc : number : ${number}`);
return;
},[number]);
useEffect (()=> {
console.log('sumeFunction 이 변경 되었습니다.')
},[someFunction]);
number 를 의존성 배열에 넣었기 때문에 number 가 변하면 의존성 배열도 변하기 때문에 someFunction 주소 값도 변하기 된다. 따라서 useEffect의 의존성 배열이 someFunction 이 변하기 때문에 console.log('sumeFunction 이 변경 되었습니다.') 이 출력 된다.
useState 의 값을 boolean 으로 두었을 때 이 boolean 값을 출력하고 싶으면
<button onClick={()=> setToggle(!toggle)}> {toolge.toString()}
식으로 만들면 true, false 버튼이 만들어 진다.
import React, { useState } from 'react';
import Box from './Box';
export default function App() {
const [size, setSize] = useState(100);
const [isDark, setIsDark] = useState(false);
const createBoxStyle = useCallback(() => {
return {
backgroundColor: 'pink',
width: `${size}px`,
height: `${size}px`,
};
}},[size]);
return (
<div
style={{
background: isDark ? 'black' : 'white',
}}>
<input
type="number"
value={size}
onChange={(e) => setSize(e.target.value)}
/>
<button onClick={()=>setIsDark(!isDark)}>Change Theme</button>
<Box createBoxStyle={createBoxStyle} />
</div>
);
}
import React, {useState, useEffect} from 'react';
const Box = ({ createBoxStyle }) => {
const [style, setStyle] = useState({});
useEffect(()=>{
console.log('box 키우기!');
setStyle(createBoxStyle);
},[createBoxStyle])
return (
<div style={style}></div>
)
}
export default Box;
