[STUDY] Hook 소개

Hook란?

• 함수 컴포넌트에서 상태와 생명주기 기능을 연동(hook into) 할 수 있게 해주는 함수이다.

Hook 소개

• Hook 는 React 버전 16.8에 새로 추가되었다.
• Hook를 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.
• 자주 사용하는 useState도 hook의 한 종류이다.
• Class 나 React 컨셉을 대체하지 않으나 props, state, context, refs, life cycle 과 같은 React 개념에 좀 더 직관적인 API 를 제공합니다.

Hook를 탄생시킨 동기

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다
• 컴포넌트로 독립적인 테스트와 재사용이 가능하다.
• 클래스의 각 생명주기 메소드에서 관련 없는 로직이 섞여있으면 복잡하며 이해하기 어렵다.
• 생명주기 메소드를 기반으로 쪼개는 데 초점을 맞추기 보단 Hook를 통해 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있다.
• 클래스는 코드의 재사용성과 구성을 어렵게 만들며 React를 배우는데 큰 진입장벽이 된다. 클래스에서는 this가 어떻게 작동하는지 알아야만 한다.

요약

• Hook는 함수 컴포넌트에서 상태와 생명주기 기능을 연동(hook into) 할 수 있게 해주는 함수이다.