오늘 복습하다 생각해보니 제일 중요한 hook에 대해 다루지 않은것 같아
부랴부랴 정리해서 올리게 되었다.
이런.. 리액트 ,, 훅 너란 녀석..

Hook 이란?

함수형 컴포넌트 내에서 상태(state), 부수 효과(side effect), 생명주기 메서드 등을 관리할 수 있게 해주는 특별한 함수이며 React 16.8 버전에 도입 되었다.
기존 클래스형에 있는 기능들을 함수형 컴포넌트에도 사용할 수 있는게 바로 Hook!

Hook 특징

1)상태 관리
useState를 사용하여 함수형 컴포넌트 내에서 상태를 관리할 수 있다.

2)부수 효과 처리
useEffect를 사용하여 컴포넌트의 생명주기 이벤트(마운트, 업데이트, 언마운트)에 맞춰 부수 효과를 처리할 수 있다.
3)컴포넌트 간 로직 재사용
useContext, useReducer, useMemo, useCallback과 같은 Hook을 사용하여 로직을 관리하고, 커스텀 Hook을 통해 로직을 재사용할 수 있다.
그밖에
useCallback, useMemo와 같은 Hook을 사용하면 불필요한 렌더링을 방지, 성능을 최적화 useMemo는 값 계산을 캐시하고, useCallback은 함수 인스턴스를 재사용 할 수 있게 한다.

장점 3가지

• 간결한 코드 💨 간단한 함수형 코드 대체
• 로직 재사용성 💨 커스텀으로 여러 컴포넌트 로직 재사용
• 함수형프로그래밍 💨 간단한 방식으로 코드 작성

---

1.useState

상태 변수와 상태 업데이트 함수를 반환 컴포넌트에서 상태를 관리

const [count, setCount] = useState(0);

count: 상태 변수
setCount: 상태를 업데이트하는 함수
0: 상태의 초기값

자세한 설명은 여기

2.useEffect

컴포넌트가 렌더링된 후에 특정 작업을 수행할 수 있게 함

useEffect(() => {
  // 이곳에 실행할 작업을 작성
  document.title = `You clicked ${count} times`;
}, [count]);

• useEffect는 렌더링 후마다 실행, 두 번째 인자에 전달된 배열 [count]에 지정된 값이 변경될 때만 실행 예)API호출, 이벤트 리스너 등록, 등

3.useContext

Context API와 함께 사용하여 컴포넌트 트리 내에서 데이터를 쉽게 전달

const value = useContext(MyContext);

• MyContext: 전달하고 싶은 데이터를 포함하는 Context 객체

4.useReducer

useState와 비슷하지만, 복잡한 상태 업데이트 로직을 처리할 때 유용 useState보다 강력한 관리

const [state, dispatch] = useReducer(reducer, initialState);

5.useCallback

함수가 렌더링될 때마다 새로 생성되는 것을 방지하고, 성능 최적화를 위해 특정 함수의 인스턴스를 재사용

const memoizedCallback = useCallback(() => {
  // function body
}, [dependencies]);

6.useMemo

값이 변경될 때만 계산된 값을 반환하여 불필요한 렌더링을 방지 useCallback와 비슷

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

7.useRef

컴포넌트 내에서 DOM에 접근하거나, 값이 변경되어도 리렌더링되지 않는다.

const inputRef = useRef(null);

Hook 규칙

최상위에서 호출
컴포넌트 함수의 최상위에서만 호출되어야 합니다. 조건문이나 반복문 안에서 호출 불가

React 함수형 컴포넌트 안에서 호출
React 컴포넌트 함수 안에서만 사용해야 하며, 일반 JavaScript 함수나 클래스 안에서는 사용할 수 없다.

결론

Hook은 React에서 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 대체하고, 더 간결하고 효율적인 코드를 작성할 수 있도록 돕는 중요한 기능이다.