class 형과 function 형 컴포넌트의 차이
class형 컴포넌트에서 정의된 맴버변수는 class가 생성될때 딴 한번만 만들어진다. state나 props가 업데이트되면 아래의 render 함수만 반복적으로 호출된다.
반면 function형 컴포넌트는 함수 자체이기 때문에 컴포넌트가 변경되면 코드블럭 즉, 컴포넌트 전체가 반복되어 호출된다. 지역변수도 다시 반복되어 정의된다.
컴포넌트가 리렌더링되면 정의했던 변수, 함수가 항상 새롭게 호출되고 정의된다.
만약 어떤 함수가 초기 렌더링때 주소값을 1을 가지고 있다가 state가 업데이트되어 다시 함수 컴포넌트가 리렌더링 될때 그 어떤 함수의 주소값은 2가 되며 새롭게 호출되고 새롭게 값을 생성한다.
🚨 하지만 useState를 사용하게 되면 리액트가 자동으로 기억하고 있기 때문에 새로워지지 않는다. state에 담긴 값은 렌더링 전 값을 기억하고 있고 그 전 값에서 업데이트를 실행한다.
리액트 훅에는 이렇게 이전의 값을 따로 저장해놓는 훅이 많아서 반복적으로 동일한 함수 컴포넌트가 호출되어도 괜찮다.
예를 들어 useRef 같은 경우 함수 컴포넌트가 호출될 때마다 매번 새로운 함수인것처럼 호출하는 것이 아니라 한번 만들어지면 그 값을 저장한다. 그것을 재사용한다.
useEffect의 경우에는 componentDidMount와 componentDidUpdate를 합친것과 같다.
즉, 컴포넌트가 마운트 되었을 때와 컴포넌트가 업데이트 되었을 때마다 호출하는 훅이다.
//컴포넌트가 마운트 될때와 업데이트 될때
useEffect(()=>{
console.log(`mounted & updated : ${count}`)
})
//count state가 업데이트 될 때 (컴포넌트도 업데이트 되는 거죠)
useEffect(()=>{
console.log(`mounted & updated : ${count}`)
}, [count])
//컴포넌트가 처음 마운트 될때
useEffect(()=>{
console.log(`mounted & updated : ${count}`)
}, [])의존성 배열에 있는 요소가 변경될 때마다 useEffect의 callback 함수를 호출하라
