리액트 훅(React Hooks)

리액트 훅(Hooks)은 React 16.8 버전 이후 추가된 기능으로, 함수형 컴포넌트에서도 상태 관리와 다양한 기능들을 사용할 수 있게하는 일련의 함수

• 이전에는 클래스형 컴포넌트에서만 사용할 수 있었던 기능들을 함수형 컴포넌트에서도 쉽게 사용할 수 있도록 해주어 개발자들의 개발 효율을 높임
• useState, useEffect, useContext 등의 기능이 있으며, 각각의 기능들은 컴포넌트에서 state, lifecycle, context를 다룰 때 사용
• 리액트 프레임워크에서는 컴포넌트를 리액트 훅을 사용하는 함수 컴포넌트 형태로 구현할 것을 권장

리액트 훅의 기본 원리

유효범위란?

• 모든 프로그래밍 언어에서 변수는 유효한 범위를 가지며, 이를 벋어나면 자동으로 소멸됨
• 블록 범위(Block Scope) : 중괄호 {...} 안쪽의 범위
  • 지역 변수(Local Variable) : 블록 범위 안의 변수
  • 전역 변수(Global Variable) : 블록 범위 바깥의 변수
    • 리액트 훅에서는 캐시(cache)를 전역 변수 형태로 만들어 함수 컴포넌트에서도 상태를 가진 것 처럼 동작할 수 있게 함

상태와 캐시

• 상태(status) : 변수의 유효 범위와 무관하게 계속 유지(preserve)되는 값

  • 불변 상태(immutable state) : 한 번 설정되면 이후로는 값을 변경할 수 없는 상태 (read only)
  • 가변 상태(mutable state) :

• 캐시(cache) : 데이터나 값을 미리 복사해 놓는 임시 저장소. 캐시의 접근 시간에 비해 원래 데이터를 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용

리액트 훅 함수의 특징

• 같은 리액트 훅을 여러 번 호출 가능
• 함수의 몸통이 아닌 몸통 안 복합 실행문의 { } 안에서 호출 불가