#리액트 #coding #programming
이번 튜토리얼에서는 리액트 훅에 대해 알아보았습니다. 먼저, 커스텀 훅을 만드는 법을 살펴봤으며, 기본적인 이름 규칙은 'use'로 시작해야 한다는 점을 알 수 있습니다. 카운터 기능을 커스텀 훅으로 구현할 수 있습니다.
커스텀 훅의 중요성은 훅을 일반 함수와 다르게 다룰 수 있다는 점입니다. 훅이 제대로 작동되지 않으면 최적화 문제나 렌더링 순서상의 문제가 발생할 수 있습니다. 그리고 커스텀 훅은 반드시 컴포넌트 함수 안에서 실행되어야 합니다.
useEffect 훅은 렌더링 후에 실행되는 로직을 정의하는데 사용되며, 상태 변경에 대한 반응으로 특정 작업을 수행하게 할 수 있습니다. 웹페이지의 창 크기를 창 크기 변경 이벤트에 반응하도록 설정하고, 이에 따라 상태를 변경하였습니다.
쿼리 작업을 처리하는 커스텀 훅인 useFetch에 대해서도 살펴봤습니다. 이 훅은 서버 요청이 필요한 경우 사용됩니다. useFetch 훅은 3개의 상태를 가지며, 요청 결과에 따라 각 상태를 업데이트합니다. 때문에 그에 맞는 렌더링 결과가 나타납니다.
마지막으로 오류 처리 또한 살펴보았습니다. 오류가 발생했을 때 useFetch 훅이 적절히 오류 상태를 처리해 사용자에게 오류 메시지를 보여주는 방식을 보여주었습니다.
이런 식으로 커스텀 훅을 이용하면 반복되는 로직을 재활용하고 확장성 좋은 코드를 작성할 수 있습니다.
= = =
🏠 얄코사이트: https://www.yalco.kr
📖 얄코 도서: https://www.yalco.kr/book/
🧑🏫 얄코 강의: https://www.yalco.kr/#lectures
🎥 제대로 파는 Git & GitHub: • 제대로 파는 Git & GitHub (대학생 전체강의 반값할인)
🎥 제대로 파는 자바: • 제대로 파는 자바 - Java 끝장내기
🎥 제대로 파는 파이썬: • 제대로 파는 파이썬 - Python 끝장내기
🎥 제대로 파는 자바스크립트: • (구판) 제대로 파는 자바스크립트 - 고정댓글에 새 버전 링크
🎥 제대로 파는 HTML & CSS: • 제대로 파는 HTML & CSS
🎥 갖고 노는 MySQL 강좌: • 왕초보용! 갖고 노는 MySQL 데이터베이스 강좌
🎥 반응형 프로그래밍 RxJS 강좌: • 반응형 프로그래밍이 뭔가요? (+ ReactiveX 강좌)
![[팩폭주의] 무엇이든 물어보세요](https://i1.ytimg.com/vi/ltnoyQRR8To/hqdefault.jpg)
