함수형 훅 정리

• 리액트 16.8v에 업데이트
• 기존에 클래스형 컴포넌트에서만 가능했던 **React state와 생명주기 기능(lifecycle features)을 함수 컴포넌트에서 “연동(hook into)“**할 수 있게 해주는 함수

장점

• 간결한 코드: 더 적은 코드로 클래스형과 같은 기능을 구현 가능하여 코드의 가독성 향상 및 유지보수에 용이
• 재사용 용이: 자주 사용하는 로직을 분리하여 컴포넌트 간에 쉽게 재사용 가능
• 컴포넌트 계층의 단순화: 컴포넌트 계층을 복잡하게 만드는 클래스 컴포넌트의 HOC(Higher-Order Components)나 렌더 프롭스(Render Props) 패턴없이 로직 재사용 가능

훅 사용 규칙

• 최상위에서만 호출해야 한다.

  • 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 않는다.

  → 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것을 보장

  → 훅이 여러 번 호출되는 중에도 훅의 상태를 올바르게 유지

• React 함수 컴포넌트 내에서만 호출해야 한다. 일반 자바스크립트 함수에서는 호출해서는 안 된다.

훅의 종류와 기능

useState

• 상태 유지 값과 그 값을 갱신하는 함수를 반환한다.

useState를 호출하는 것의 의미?

• state 변수를 선언하는 것.
• 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 리액트에 의해 사라지지 않는다.