[React] Hook API ep.1

모리스·2022년 5월 13일
1

React-Native

목록 보기
2/12
post-thumbnail

React Native 앱을 개발하며 오래전 학습했던 React Hook을 정리해 본다.

Hook

  • React에서 기존 class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 Hook을 통해 사용할 수 있다.
  • Hook은 함수형 컴포넌트(functional Component)에서 React state생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수이다.
  • Hook은 class 안에서 동작하지 않으며, class 없이 React를 사용할 수 있게 한다.

📌 Hook의 특징

  1. 기존 코드를 다시 작성할 필요 없이 일부 컴포넌트들 안에서 Hook을 사용할 수 있다.
  2. Hook은 호환성을 깨뜨리지 않고 이전 버전과 100% 호환된다.
  3. Hook은 기존 React 컨셉을 대체하진 못하나, props, state, context, refs, lifecycle과 같은 기존 React 개념에 좀 더 직관적인 API를 제공한다.

📌 Hook 사용 규칙

Hook은 단지 JavaScript 함수이지만, 다음 두 가지 규칙을 준수해야 한다.
1. 최상위에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행할 수 없다.
2. React 함수 컴포넌트 내에서만 Hook을 호출해야 한다. 일반 JavaScript 함수에서는 Hook을 호출해선 안된다.

참조 React 공식 doc

profile
모바일 앱 개발 노트 :)

0개의 댓글