React + TIL

useEffect

• side effect를 다룰 때 사용하는 hooks (한번만 실행되도록 해줌)
• useEffect(( ) => {원하는 코드}, [ ]);
  (익명)함수, array
• 렌더링이 일어나지 않는 동안 사용할 수 있음 (useMemo와 차이점)

dependency array 의존성 배열

• useEffect 함수의 두번째 인자: dependency array
• 최초 렌더 = 마운트, 그 뒤 렌더 = 리렌더
• 빈 배열: 최초 render이후 1회 실행
  배열 안에 state, prop이 있을 경우: 최초 render 1회, 다음 dependency array에 넣은 값이 바뀌면 callback함수 재실행

cleanup

• 바뀐 state값을 이용하여 document에 click event listener를 등록하기
• 최초 render 후, state값이 변경되면 remove를 통해 리렌더

실습

마지막 input 변경 이후 console.log 출력
3초 타이머 ui 포함하기

import React, { useEffect } from 'react';

const App = () => {
  const [value, setValue] = React.useState('');

  return (
    <input
      type='number'
      onChange={(e) => { setValue(e.target.value); }}
    />
  );
}

export default App;

---

import React, { useEffect } from 'react';

const App = () => {
  const [value, setValue] = React.useState('');
  const [number, setNumber] = React.useState(0);
  useEffect(()=>{
    setNumber(0);
    const start = setInterval(()=>{
      setNumber(prevNumber => prevNumber + 1)
    }, 1000);
    const showAlert = setTimeout(()=>{
      console.log(value);
      clearInterval(start);
    },3000)
    
    return () => {
      clearTimeout(showAlert);
      clearInterval(start);
    }
  }, [value])
  
  return (
    <>
      <input type="text" onChange={(e) => {setValue(e.target.value)}} />
      <br />
      {3 - number}
    </>
  );
}
export default App;

• setTimeout(실행시킬 함수, 기다릴 시간ms): 기다릴 시간이 지나면 1회 실행되고, 멈춤
  setTimeout(( ) => alert(1), 1000);

memoization

• 항상 동일한 값을 저장 후, 함수가 리렌더 되더라도 계산을 다시 실행하지 않고 저장된 값을 사용할 수 있게 해주는것
• 언제 사용하는지?
  • memoization 해야하는 결과를 얻기 위해서 오랜시간이 소요될 때
  • 컴퓨팅파워 절약이 필요할 때
• dependency array에 불필요한 state, prop은 빠지고 연산을 수행하기 위해 필요한 state, prop만 dependency array에 넣기

useMemo

• Callback함수에서 리턴하는 값이 memoization 됨
• 빠른 렌더링 속도를 얻을수 있음
• useMemo로 전달된 함수는 렌더링이 일어나는 동안 실행 됨
• useMemo훅에 의존성 배열을 넣고 해당 변수들의 값이 바뀜에 따라 새로 값을 계산 해야할 경우 사용

const memoizedValue = useMemo(
  () => {
    //연산량이 높은 작업을 수행하여 결과를 반환
    return computeExpensiveValue(의존성 변수1, 의존성 변수2);
  },
  [의존성 변수1, 의존성 변수2]
);

useCallback

• useMemo의 함수 버전 (값이 아닌 함수를 반환)
• useCallback(fn, deps)은 useMemo(( ) => fn, deps)와 같음
• 함수를 리턴할땐 Memo, Callback 그 외엔 Memo
• Callback함수가 memoization 됨

const memoizedCallback = useCallback(
  () => {
    doSomething(의존성 변수1, 의존성 변수2);
  },
  [의존성 변수1, 의존성 변수2]
);

---

+TIL

• useMemo와 useCallback 동일한 역할을 하는 두 줄 코드
  useMemo(() => 함수, 의존성 배열);
  useCallback(함수, 의존성 배열);