🧾 참고 문서 :
https://ko.react.dev/reference/react/hooks

• 각 Hook에 대한 자세한 설명은 다음 포스트에서

1️⃣ Hooks란?

React Hooks는 리액트 16.8 버전에 새로 도입된 기능으로,
Class를 사용하지 않고도 React의 기능들을 편하게 사용할 수 있음

• 특히 함수형 컴포넌트에서 유용하게 React 기능들 사용 가능

---

2️⃣ State Hooks

✍ state란?

• 컴포넌트 내부에서 정보를 "기억"하도록 만든 변수
  ex. 사용자 입력값, 배열, 이미지 ...

📌 state hook 종류

1) useState

• 컴포넌트에 state 변수를 추가할 수 있는 React Hook
• 가장 기본적인 Hook으로, 함수형 컴포넌트에서 상태 관리할 때 사용

사용법

1. 선언하기

const [상태, set상태] = useState(초기값);

2. 상태 업데이트

set상태(변경할 값);

3. 상태 보여주기

<div>{상태}</div>

2) useReducer

• useState와 같이 상태 관리할 수 있는 Hook
• reducer 함수의 내부 업데이트 로직을 사용하여 state 변수를 추가함
  => 좀 더 구조화된 방식으로 상태를 관리할 때, 혹은 복잡한 데이터(ex. 객체 배열)을 관리할 때 주로 사용

사용법

1. 선언하기

const [상태, dispatch함수] = useReducer(reducer함수, 초기상태);
// dispatch함수 : 상태(state) 변경 시 필요한 정보를 전달해주는 함수
// reducer함수 : dispatch 정보를 바탕으로 상태(state)를 변경해주는 함수

2. reducer 함수 (=상태 변경, 관리 함수) 만들기

• 컴포넌트 바깥에서 사용

function reducer(상태, 액션객체) {
}
// 액션객체: 상태 업데이트 정보 (dispatch 인자값) 
// 즉, 상태를 어떤 식으로 변경할지에 대한 내용

---

3️⃣ Context Hooks

✍ context란?

• (쉽게 말해서) 전역 상태.
• 컴포넌트가 Props를 전달하지 않고도 멀리 있는 부모 컴포넌트로부터 정보를 받을 수 있게 해줌

📌 context hook 종류

useContext

• context를 읽고 구독하는 Hook

사용법

1. 새로운 context 만들기

const SomeContext = createContext(기본상태);

2. context 가져오기

const value = useContext(SomeContext);

---

4️⃣ Ref Hooks

✍ ref란?

• "reference"의 준말
• ref를 사용하면 컴포넌트가 렌더링하지 않는 정보 보유 가능 (ex. DOM, timeout ID 등)
  • state와 달리, ref는 업데이트를 하면 컴포넌트가 리렌더링되지 않음

📌 ref hooks 종류

useRef

• ref를 선언하는 Hook

사용법

1. ref 선언

const ref = useRef(0);

2. ref 가져오기

• 위와 같이 선언할 경우 ref객체 안에는 아래와 같이 구성되어 있으므로,

{current: 0}

• ref.current로 값 가져오기

---

5️⃣ Effect Hooks

✍ Effect란?

• Side Effect를 뜻함
• 즉, 외부 세계와의 상호작용을 통해 발생하는, 예측이 어려운 결과
  • ex1. 백엔드 서버로부터 데이터 요청
  • ex2. document나 window와 같은 브라우저 API와의 상호작용
  • ex3. setTimeout 또는 setInterval과 같은 타이밍 함수 사용
• (대부분의 리액트 컴포넌트는 순수 함수로, 입력값에 대해 예측 가능한 출력을 반환)
  

📌 effect hooks 종류

useEffect

• 컴포넌트를 외부 시스템과 연결하는 Hook
• 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

사용법

useEffect(() => {
  // 사이드 이펙트 로직 (외부 시스템과 연결하는 로직)

  return () => {
    // 클린업 로직 (사이드 이펙트 종료하는 로직)
  };
}, [의존성배열]);
// 의존성배열이 업데이트될 때마다 useEffect 실행

6️⃣ Performance Hooks

✍ Performance(성능) 최적화란?

• 불필요한 렌더링을 줄여서 자원을 절약하고, 애플리케이션이 더 빠르게 동작하도록 만드는 과정
  • 리렌더링을 최소화해야 함!

컴포넌트가 리렌더링되는 경우

• 부모에서 전달받은 props가 변경될때
• 부모 컴포넌트가 리렌더링 될 때
• 자신의 state가 변경 될 때

📌 performance hooks 종류

1) useMemo

• 값을 기억(memoization)하여, 값이 변경될 때만 계산을 다시 해주는 Hook

사용법

const cachedValue = useMemo(계산할함수, [의존성배열]);

2) useCallback

• 함수를 기억(memoization)하여, 의존성이 변경되지 않으면 동일한 함수를 재사용하도록 하는 Hook

사용법

const cachedFn = useCallback(계산할함수, [의존성배열]);