함수 컴포넌트와 리액트 훅

리액트 훅이란?

• 리액트 프레임워크는 컴포넌트 기법으로 가상 DOM 객체를 만들고 나서 가상 DOM 객체에 어떤 변화가 감지되면 해당 변화만 화면에 재렌더링하여 전체 렌더링 속도를 빠르게 하는 데 초점이 맞춰진 프레임워크이다. 
• 오랫동안 리액트 프레임워크의 컴포넌트는 객체지향 언어의 상속 개념에 맞춘 클래스 형태로 제작되었으나, 클래스 컴포넌트는 코드를 작성하는 법도 복잡하고 매우 빠른 재렌더링을 실행해야 할 때 화면에 정상적인 렌더링이 안되는 등의 버그를 갖고 있어 함수 컴포넌트를 제작하였다.
• 함수 컴포넌트가 어떤 값을 유지할 수 있도록 만든 데이터 캐시 시스템을 쉽게 사용할 수 있도록 'use~'로 시작하는 여러 개의 API(리액트 훅)을 제공하게 되었다.
• useMemo, useCallback, useState, useReducer

커스텀 훅이란?

useToggle과 같이 개발자가 직접 만드는 훅 함수를 커스텀 훅이라 한다.

 

☆ 리액트 훅 사용 시 주의할 점

1. 같은 리액트 훅을 여러 번 호출할 수 있다.
2. 함수 컴포넌트 몸통이 아닌, 몸통 안 복합 실행문(compound statement)의 { }에서는 호출할 수 없다.
3. 비동기 함수(async 키워드가 붙은 함수)는 콜백 함수로 사용할 수 없다.