React Hook

React Hook

React Hook은 리액트 클래스형 컴포넌트에서 이용하던 코드를 함수형 컴포넌트에서 사용할 수 있게 만들어준 라이브러리입니다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능합니다.

React Hook의 장점

코드 간결성

함수형 컴포넌트와 Hook을 사용하면 클래스 컴포넌트보다 코드가 더 간결해집니다. 따라서 코드를 이해하고 유지 보수하기가 더 쉬워집니다.

재사용성

Custom Hook을 만들어 여러 컴포넌트에서 재사용할 수 있습니다. 이로 인해 코드의 중복을 줄이고 논리를 쉽게 공유할 수 있습니다.

컴포넌트 분리

Hook을 이용하면 상태 관련 로직을 컴포넌트에서 분리하여 더욱 독립적인 함수로 만들 수 있습니다. 이로 인해 컴포넌트를 더욱 재사용 가능하고 테스트하기 쉬운 구조로 만들 수 있습니다.

라이프사이클 메서드 문제 해결

클래스 컴포넌트에서는 관련 있는 코드가 여러 라이프사이클 메서드에 의해 분산될 수 있었습니다. 이로 인해 코드의 일관성을 유지하거나 버그를 잡기 어려움이 있었습니다. Hook을 사용하면 이런 문제를 해결하고 관련 있는 코드를 한데 묶을 수 있습니다.

Hook 규칙

최상위에서만 Hook을 호출

반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안 됩니다. React Hook은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여서 버그가 발생할 수 있습니다.

React 함수 내에서만 Hook을 호출

Hook은 일반적인 js 함수에서는 호출하면 안 됩니다. 함수형 컴포넌트나 custom hook에서는 호출 가능합니다.

React Hook 종류

공식 사이트 링크

일반 함수와 React Hook의 차이

일반 함수

단순히 특정 로직을 수행하고 결과를 반환하는 역할을 합니다. 일반 함수는 특정한 상태를 유지하지 않으며, 입력이 주어지면 항상 동일한 출력을 반환합니다.

React Hook

함수형 컴포넌트에서 상태 및 생명주기와 같은 리액트의 고급기능을 사용할 수 있도록 합니다. Hook은 컴포넌트의 상태를 관리하거나 사이드 이펙트를 처리하는 등의 작업을 수행합니다.