React Hook : State와 클래스형 컴포넌트에서 접근할 수 있던 생명주기 등을 함수형 컴포넌트에서도 함수로 다룰 수 있도록 추가된 함수 집합체

useState : State 상태변수 관리

import { useState } from "react";

const App = () => {
	// 구조분해 할당 문법
	const [number, setNumber] = useState(0);

	return (
		<>
			<h1> Number is {number} </h1>
			<button onClick={
				() => 
					setNumber(number + 1)
				}>Button</button>
		</>
	);
}

• JS ES6 문법 : 구조분해 할당 (Destructuring Assignment)

  // Array Destructuring Assignment
  let [a, b] = [10, 20];
  console.log(a); // 10
  console.log(b); // 20
  
  // Object Destructuring Assignment
  let student = {
  	name: "Yongmin Yoo",
  	age: 23,
  	phone: "010-3485-1022"
  };
  
  let { name, age, phone } = student;
  console.log(name); // Yongmin Yoo
  console.log(age); // 23
  console.log(phone); // 010-3485-1022
  
  let { name: aaa, age: bbb, phone: ccc } = student;
  console.log(aaa); // Yongmin Yoo
  console.log(bbb); // 23
  console.log(ccc); // 010-3485-1022
  
  

useEffect : 생명주기와 유사하게 컴포넌트 렌더링 이벤트 관리

import { useEffect, useState } from "react";

const App = () => {
	const [number, setNumber] = useState(0);
	const [arr, setArr] = useState(0);

useEffect(() => {
	return () => {
	};
}, []);
	
	useEffect(() => {
		// componentDidMount
		// componentDidUpdate
		console.log("");
		return () => {
			// componentWillUnmount
		};
	}, []);
	// 배열에 특정 props, state 등의 변수 값을 넣을 수 있다.
	// 그러면, componentDidUpdate 생명 주기와 유사하지만,
	// 배열에 들어있는 값이 Update 된 경우에만 동작한다.
	// 빈 배열인 경우, Update를 확인할 값이 없으므로, 모든 Update에 반응하지 않는다.
	// 모든 Update에 반응하도록 하려면 배열을 생략한다.
}

useRef : DOM의 특정 요소에 직접 접근

• DOM을 직접 조작하거나, Vanilla 전용으로 개발된 JS 컴포넌트를 활용할 때 사용
• React.JS의 동작 안정성을 해치는 Hook이기에, 사용이 지양됨

useMemo : 메모이제이션 방식으로 연산된 값을 저장해두었다가, 이후에 재사용 할 때 호출하여 사용.

• 고도의 연산이 필요한 웹 프론트 개발에서, 중복 연산을 방지하고자 사용하는 Hook.

useCallback : useMemo와 유사하지만, 변수가 아닌 함수를 메모이제이션 방식으로 저장해두었다가, 이후에 재사용.

• 기본적으로 컴포넌트 내에 선언된 모든 함수는 컴포넌트가 렌더링되는 시점에 다시 선언이 됨.
• 단순히 함수를 다시 선언하는 것은 서버의 리소스에 무리를 주지는 않지만, 컴포넌트의 규모가 커지게 되면 이 작은 리소스 이용도 무리가 될 수 있기 때문에, useMemo와 유사하게 중복 연산을 방지하고자 활용하는 Hook.