리액트 13강

• useEffect
  • 우리가 호출을 하는 훅이 아닌 자동으로 호출이 되는 훅
  • 컴포넌트가 마운트가 되고 dom이 변경 된 다음 렌더링 발생 후 실행됨
  • 언제 필요하냐?
    • props 에 속한 값을 컴포넌트의 로컬 변수로 선언
    • API 호출하여 통신을 통해 값을 받아오거나 받은 값을 state에 값을 넣어주나 할 때 사용 
    • 서드파티 라이브러리 사용
  • 즉, 렌더링이 다 되면 화면에 요소들이 나타나고 그 다음 다시 한번 데이터를 변경할 때 사용하는 것
  • 아래 코드에서 제목이 알아서 바뀐다는 것이 핵심 -> 제목은 useeffect에서 바뀌는것

import React, { useState, useEffect } from "react";

function App() {
    const [count, setCount] = useState(0);

    useEffect(
        () => {
            console.log("use effect");
            document.title = `You clicked ${count} times`; //얘도 실행됨
        }
    )

    return (
        <>
            <p>you clicked {count} times</p>
            <button onClick={
                () => {
                    console.log("Click");
                    setCount(count + 1);
                } //이 부분이 바뀌고 리렌더링 될 때마다
            }
            >
                click me
            </button>
        </>
    )
}

export default App;