React 훅 API

Hooks를 이해하려면 로직 재사용에 대해 생각해야 합니다. 일반적인 재사용 방법은 함수 혹은 클래스를 작성하고 호출하는 것입니다. 그리고 React는 함수, 클래스를 사용해 컴포넌트를 작성합니다. 컴포넌트는 UI를 렌더링 하는 데 있어 매우 중요한 개념입니다.

주요개념

로직 재사용

컴포넌트 내부에 캡슐화 된 로직은 다른 컴포넌트와 공유가 쉽지 않습니다.
로직을 재사용하기 위해 React 앱에서 Render Props 와 같은 복잡한 패턴을 사용해야 합니다.
함수는 코드를 재사용 하기 위한 완벽한 메커니즘.(함수의 로직을 다른 함수로 공유하는 데 최소한의 노력만 필요하니까) 다만, 함수는 내부에서 상태(state)를 관리 할 수 없는 문제를 가집니다.
이러한 문제는 Hooks을 통해 해결할 수 있습니다.

캡슐화

Hook은 완전하게 캡슐화 처리되므로, 현재 실행 중인 컴포넌트에서 Hook을 호출할 때에도 격리된 로컬 상태를 유지합니다. 이러한 특성은 Hook을 매우 강력하게 만듭니다. Hook은 상태를 공유하는 방법이 아니라, 상태 저장 로직을 공유하는 방법입니다. 결과적으로 Hook은 React의 단방향 데이터 흐름을 깨트리지 않습니다.

보다 작은 번들 크기

Hooks는 클래스를 사용할 때 보다 번들된 파일의 크기를 줄여 다소 성능 향상을 기대할 수 있습니다.

React 규칙

• 컴포넌트와 훅 함수는 모두 순수해야 합니다.
• 훅 함수는 지켜야 할 규칙이 2가지 있습니다.

컴포넌트와 훅 함수의 순수성

컴포넌트와 훅 함수를 작성할 때 순수함을 지켜야 하는 것은 React의 주요 규칙으로, 규칙을 준수함에 따라 예측 가능하고 디버깅이 쉬워지며 React가 코드를 자동으로 최적화하는데 도움을 줄 수 있습니다.

• React 컴포넌트는 항상 입력(props, state, context)에 따라 동일 출력을 반환해야 합니다.
• 부수 효과(Side Effects)는 렌더링 외부에서 실행되어야 합니다. (예: 이벤트 핸들러, 이팩트 내부)
• 컴포넌트 속성(props) 및 상태(state)를 렌더링 중 변경 시도해서는 안됩니다.
• 훅 함수에 전달된 인수를 수정하려 해서는 안됩니다.
• JSX로 전달된 값을 변경해서는 안됩니다.

훅(Hooks) 사용 규칙

훅(Hook) 함수는 조금 특별할 뿐인 일반 JavaScript 함수로, 다음 2가지 규칙을 준수해야 합니다.

1. React 함수 컴포넌트, 다른 커스텀(사용자 정의) Hook 함수 안에서만 사용 가능합니다.
   일반 함수, 또는 클래스 컴포넌트 안에서 호출하면 안됩니다.
2. Hook은 문 또는 중첩 된 함수 안에서 사용할 수 없습니다.
   (컴포넌트, 커스텀 Hook 함수 최상위에서만 사용)