useEffect, useRef

useEffect

컴포넌트가 화면에 보여지거나 사라졌을 때 무언가를 실행하고싶다면

=> useEffect를 사용

useEffect는 리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 훅이다

App 컴포넌트가 화면에 렌더링 된 이후 useEffect 안에 있는 console.log가 실행

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

---

useRef

useState와 더불어 특정 값을 저장하기 위해 사용하는 대표적인 hook

• Re-rendering과 상관없이 값을 기억하기 위해 사용되는 것이다

• state는 변경되면 렌더링이 되고, ref는 변경되면 렌더링이 안된다