HOOK

1. React Hooks의 등장

• 리액트 컴포넌트: 클래스형 컴포넌트 / 함수형 컴포넌트

• 클래스형 컴포넌트의 단점
  1. 코드가 길고 복잡
  (constructor, this, binding 등 지켜야 할 규칙이 많고, Life cycle method로 인해 기본적으로 뚱뚱)
  2. logic 재사용의 어려움
  3. 성능 비교적 낮음

• 근데 왜 사용하냐?
  : state 관리와 Life cycle method 사용하려고

• Hooks 등장!
  : 함수형 컴포넌트에서도 이러한 작업 할 수 있게 됨 + 기존의 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결🤩

2. useState

매우 잘 숙지하고 있다고 생각하기 때문에.. 일단 생략!

3. useEffect

😡 이번 플젝에서 내 시간 잡아먹은놈 😡

전부터 어찌저찌 써오긴 했었다만.. 이번 플젝에서 갑자기 알 수 없는 오류가 여러번 나와서ㅜㅜ 그때그때 유튜브보고 구글링하며 수없이 공부했던 부분

• useEffect는 컴포넌트가 렌더링될 때마다(화면에 그려질 때마다) 실행
• ❌ useEffect 속에 setState 넣을 때, 렌더링 -> useEffect -> state변경 -> 렌더링 -> useEffect -> state변경 -> 렌더링 무한반복 조심!!!
• ⭕ 해결 위해 useEffect에 두 번째 인자로 배열 전달
  -> 배열 속의 요소가 변화될 때에만 useEffect 실행
  (빈 배열 전달하면, 최초 렌더링 시 한 번만 실행)