[Flutter] flutter_hooks 개념(1)

Flutter hooks 이란?

먼저, Hook이란 갈고리 라는 뜻을 의미합니다.
일반적으로 프로그래밍에서 '원래 존재하는 어떤 기능에 갈고리를 거는 것 처럼 끼어 들어가 같이 수행하는 것' 을 의미합니다.

React에서 'state와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행 되도록 만든 것' 의 의미로 사용됩니다.

이처럼 React에서 사용되는 hooks라는 기능에서 영감을 받아,
flutter에 맞도록 구현된 패키지 입니다.

flutter에서는 대표적으로 StatelessWidget과 StatefulWidget이 있습니다.

상태관리를 사용할 경우에는 StatefulWidget을 사용하고,
그렇지 않은 경우에는 StatelessWidget을 사용합니다.
(상태관리 라이브러리를 별도로 사용하는 경우에는 StatelessWidget을 사용할 것 입니다.)

또한, 애니메이션 처리를 한다거나, 라이프사이클을 필요로 할때 StatefulWidget을 사용합니다.

이러한 것을 HookWidget으로 모든 것을 사용할 수 있도록 하였습니다.

장점

• 라이플 사이클을 전혀 고려하지 않아도 자동으로 처리를 해줍니다.
• UI와 상태관리에 초점을 맞춰서 개발을 할 수 있습니다.
• 보일러 플레이트 코드를 없애주기 때문에 고민없이 사용할 수 있습니다.

이처럼 아래와 같이 기존의 코드를 간략하게 사용할 수 있습니다.

before

class Example extends StatefulWidget {
	final Duration duration;
    
    const Example({key? key, required this.duration}) : super(key: key);
    
    @override
    _ExampleState createState() => _ExampleState();
    
    class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
    	AnmiationController? _controller;
        
        @override
        void initState() {
        	super.initState();
            _controller = AnimationController(vsync: this, duration: widget.duration);
        }
        
        @override
        void didUpdateWidget(Example oldWidget){
        	super.didUpdateWidget(oldWidget);
            if(widget.duration != oldWidget.duration) {
            	_controller!.duration = widget.duration;
            }
        }
        
        @override
        void dispose(){
        	_controller!.dispose();
            super.dispose();            
        }
        
        @override
        Widget build(BuildContext context){
        	return Container();
        }
    }
}

After

class Example extends HookWidget {
	const Example({Key? key, required this.duartion}) : super(key: key);
    
    final Duration duration;
    
    @override
    Widget build(BuildContext context){
    	/* useAnimationController의 메서드로 인해 
		 애니메이션 컨트롤러의 생성부터 update, dispose까지 모두 처리가 가능합니다. */
    	final controller = useAnimationController(duration: duration);
        return Container();
    }
}

참고 문서:
https://pub.dev/packages/flutter_hooks
https://www.youtube.com/watch?v=GBVBLKESogU
https://thinkmath2020.tistory.com/3536