리액트의 Hook에 영감을 받아 만든 위젯 보일러 플레이트 대체 도구

flutter_hooks | Flutter Package

bloc버전

hooked_bloc | Flutter Package

<aside> 💡

flutter_hooks는 위젯의 생명주기를 자동으로 관리하고 보일러 플레이트를 줄일 수 있는 좋은 플러그인이지만 build 메서드 안에서만 사용할 수 있다는 특성 때문에 UI와 비즈니스 로직을 분리하기 어려운 구조적인 문제가 있다. 따라서 아래에 소개된 모든 기능을 사용하려기 보다 위젯 생명주기 자동 관리 및 보일러 플레이트 감소 위주의 기능을 사용하고 상태관리 플러그인을 병용하는 것을 추천한다.

</aside>

훅 종류

원시 타입 hook

로우레벨 hook으로 위젯의 다양한 생명주기와 상호작용 하는 역할을 한다.

Name Description
useEffect 사이드 이펙트를 확인하고 선택적으로 취소할 때 유용하다
initState + didUpdateWidget + dispose 기능과 동일하다
기본적으로 빌드될 때 마다 호출되지만 keys 리스트를 넘겨준다면 이 keys에 포함된 값이 변경될 때만 호출된다.
key를 넘겨주지 않으면 매번 재빌드 때 마다 호출해서 didChangeDependencies 처럼 사용할 수 있다.
빈배열 [] 를 넘겨주면 위젯의 최초 빌드 때 1번 호출해서 initState 처럼 사용할 수 있다.
useState 변수를 생성하고 그 변수를 구독한다
변수가 변경될 때 마다 HookWidget에게 빌드할 필요성이 있다고 알려준다
useMemoized 복잡한 객체를 캐싱한다
넘겨준 함수를 즉시 실행하여 저장하고 있다가, HookWidget이 재빌드되면 함수를 재실행하지 않고 기존에 가지고있던 인스턴스를 넘겨준다.
만약 key를 다르게 넘겨준다면 인스턴스를 다시 생성한다.
즉, 함수의 결괏값이 그대로라면 해당 함수는 실행되지 않는다.
useRef 변경 가능한 프로퍼티 하나를 가진 객체를 생성한다.
프로퍼티를 변경해도 아무 영향이 없으며 불필요하게 재빌드 할 필요 없이 빌드 호출에서 상태를 공유할 때 유용하다.
해당 플러그인이나 상태관리에서 추적중인 객체를 재빌드 걱정 없이 변경하고 값을 참조하고자 할 때 사용하는 듯 하다.
useCallback key의 리스트를 기반으로 재빌드 과정 전반에 걸쳐 함수를 캐싱한다.
함수를 캐싱하고 싶은데 useMemoized를 사용하면 useMemoized(() ⇒ () {}) 같은 형식이 된다.
그래서 이걸 useCallback(() {}) 로 줄여주는 useMemoized 훅의 신택스슈거 버전이다.
useContext HookWidget의 BuildContext를 반환한다.
useValueChanged 넘겨준 value를 감시하면서 변경이 일어나면 넘겨준 콜백함수를 실행한다.

객체-바인딩(Object-binding)

이 카테고리의 hook은 존재하는 Flutter나 Dart의 객체를 hook을 사용하여 조작한다.

객체의 생성, 업데이트, 해제를 관리한다.

dart:async related hooks

Name Description
useStream Stream 객체를 구독하고 현재 상태를 AsyncSnapshot 타입으로 반환한다.
preserveState 파라미터를 통해 현재 값을 보존할지 여부를 정할 수 있다. 기본값은 True
useCallback 등으로 변수를 1회만 호출되도록 구현하지 않고 바로 함수를 넘겨줄 경우
useStream 함수가 호출되면서 넘겨준 콜백함수가 실행되고,
이 콜백함수로 인해 위젯이 재빌드 되면서 다시 useStream 함수가 호출되면서 또 콜백함수가 실행된다.
이렇게 무한 루프에 빠지지 않도록 주의해서 구현해야 한다.
useStreamController 자동으로 dispose 되는 StramController 객체를 만든다. 참고
useOnStreamChange Stream 객체를 구독하고 Stream.listen 생성자를 호출하여 onData, onError, onDone 콜백 함수를 등록한다.
값이 수신될 때 마다 StreamSubscription 객체를 반환한다.
useFuture Future 객체를 구독하고 현재 상태를 AsyncSnapshot 객체로 반환한다.
preserveState 파라미터를 통해 현재 값을 보존할지 여부를 정할 수 있다. 기본값은 True
해당 메서드에서 사용할 Future 객체는 외부에서 만들어서 주입해줘야 한다.
그렇지 않으면 빌드 메서드가 호출될 때 마다 넣어준 Future 또한 매번 실행된다.
useMemoized를 사용하는 것을 추천한다.

Animation related hooks