요즘은 class 사용보다는 hooks를 사용해서 코드를 더 작성한다고 한다.
(대부분 class를 사용하지 않기도 하고, React에서도 hooks를 사용하라고 권유하기도 한다)
훅은 상태 관리나 생명주기 관리를 클래스 컴포넌트 없이 함수 컴포넌트 내에서도 할 수 있다. 특히 useState, useEffect, useContext 등의 훅은 React 애플리케이션을 작성하는 데 매우 유용하다고 한다!
그럼 이전에 작성했던 구구단 찾기 코드를 훅으로 바꿔서 코드를 다시 작성해보자 !
1 . class 대신에 함수 사용
이 코드를 함수로 사용해서 만들어 보자
함수 컨포넌트는 상태 관리를 위해 React의 useState 훅을 사용한다.
이 함수 컴포넌트는 초기값을 갖는 first, second, value, result 상태를 가지고 있다.
이제 이 상태들을 업데이트하고 상태에 따라 UI를 변경할 수 있다. --> 예를 들어 setFirst, setSecond, setValue, setResult를 사용하여 각각의 상태를 업데이트를 하면 된다!
2 . render() 함수 대신 GuGuDan 함수 안에 return 값 사용
코드가 한결 가벼워진 것을 확인할 수 있다
GuGuDan 함수 내부에서 return문을 사용하여 JSX를 반환하며, 위에서 정리해둔 컴포넌트를 가져와 사용하면 끝 !
그럼, onchange, onSubmit은 어떻게 해야할까?
3 . 함수는 어떻게 ?
setFirst: 상태 업데이트 함수이다. 즉, setFisrt -> first의 값을 새로 세팅한다! 라고 이해하면 될 것 같다!
함수형 컴포넌트를 사용하는 것이 더 좋은 점
1 . 코드의 간결성: 함수형 컴포넌트는 클래스 컴포넌트에 비해 코드가 더 간결하다. 위에서 볼 수 있다시피 클래스 컴포넌트에서는 this 키워드를 사용하고, 메서드를 바인딩해야 하는 등의 작업이 필요하지만, 함수형 컴포넌트에서는 this를 사용하지 않는다!
2 . 훅(Hooks)의 사용: 함수형 컴포넌트는 리액트 훅을 사용할 수 있어 상태 관리와 사이드 이펙트를 처리하는 코드가 더 직관적이고 간결하다. 예를 들어, useState 훅을 사용하여 상태를 쉽게 관리할 수 있다.
이 두가지가 가장 직관적이고 이해하기 쉬운 것 같다!
