useCallback

유관희·2022년 10월 23일
0

→ Open in Slid


‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

‏‏‎ ‎

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;

‏‏‎ ‎

‏‏‎ ‎

profile
안녕하세요~

0개의 댓글