React Hooks - 작성 중

state란?
사용자의 반응에 따라 화면을 재렌더링 하기 위해 사용되는 트리거 역할의 변수를 의미한다. React가 state를 감시하고, 바뀐 정보에 따라 화면에 바뀐 값을 표시해준다.

React Hooks?
기존 클래스형 컴포넌트를 사용하지 않고, 함수형 컴포넌트를 사용하며 상태 관리를 할 수 있게 만든 라이브러리

React에서 기본적으로 지원하는 Hooks

1. useState

   // React에 기본적으로 내장되어 있는 useState 훅을 사용하면, state를 만들 수 있다.
   import { useState } from "react";
   
   // const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);
   function Example() {
       const [name, setName] = useState("");
   
       return (
           <div>
               // 지정한 상태 값 가져오기
               <p>my name is {name}</p>
               // 버튼 클릭 시 상태 값 변경
               <button onClick={() => setName("chaticker")}>Click Me</button>
           </div>
       );
   }

2. useEffect:
   컴포넌트가 mount, unmount, update 됐을 때, 특정 작업을 처리하는 훅(즉, 렌더링 될 때마다 특정 작업을 수행하는 훅)
   -> 클래스형 컴포넌트에서 사용하던 생명 주기 메서드를 함수형 컴포넌트에서도 사용할 수 있게 됨

   // React에 기본적으로 내장되어 있는 useState와, useEffect 불러오기
   import { setState, useEffect } from "react";
   
   function App() {
     const [name, changeName] = setState("");
   
     // useEffect(실행할 함수, 트리거가 될 배열 형태의 변수(=deps))
     // 1. mount(초기)일 때: 배열 생략 시, 리렌더링 될 때마다 실행됨
     useEffect(() => {
       console.log("렌더링 될 때마다 실행");
     });
   
     // 2. update일 때: 배열에 특정 값을 지정해 특정 값이 업데이트 될 때마다 실행됨
     useEffect(() => {
       console.log(name);
       console.log("name이 업데이트 될 때마다 실행");
     }, [name]);
   
     // 3. unmount일 때 & update 되기 직전에: cleanup 함수 반환 - return 뒤에 나오는 함수이며, useEffect에 대한 뒷정리 함수라고 생각하면 됨(컴포넌트가 화면에서 사라지게 됨)
     useEffect(() => {
       console.log("컴포넌트 나타남");
       console.log(name);
       return () => {
           console.log("cleanUp 함수");
       };
     }, []); 
     // unmount 될 때만 cleanUp 함수를 실행시키고 싶다면 빈 배열
     // 특정 값이 update 되기 직전에 cleanUp 함수를 실행시키고 싶다면 deps에 해당 값 넣기
   }

---

useMemo, useCallback을 설명하기 전에, memoization이란?
memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법 - 두 가지 모두 렌더링 성능 최적화를 위한 훅이다.

3. useMemo
   useMemo는 메모이제이션된 '값'을 반환
4. useCallback
   useCallback은 메모이제이션된 '함수'를 반환