커스텀 훅과 일반 기능의 반응, 차이점은 무엇입니까?
나는 커스텀 훅에 머리를 싸매려고 한다.정상적인 후크는 이해하지만, 커스텀 후크를 쓸 때 일반 기능과 어떤 차이가 있습니까?사용법이라고 부르지 말고 일반 기능이라고 하면 어떨까요?*
아무도 당신의 질문에 정확히 대답하지 않았다고 생각합니다.후크라고 하는 이 추가 기능의 장점과 목적도 이해하고 있습니다만, 아직 이해를 나눌 수 있습니다.
리액트 훅은 리액트의 힘을 가진 JS 함수입니다.즉, 일반 JS 함수에 추가할 수 있는 로직을 추가할 수 있을 뿐만 아니라 useState, useEffect 등의 네이티브 훅을 사용하여 로직을 활성화하거나 상태를 추가하거나 부작용, 메모화 등을 추가할 수 있습니다.따라서 훅은 컴포넌트의 로직을 고립된 방식으로 관리하는 데 매우 좋은 방법이라고 생각합니다.
따라서 foo.component.js(UI), useFoo.js(logic)를 사용할 수 있습니다.useFoo에는 많은 js 함수와 해당 함수를 관리하고 예상되는 것을 반환하기 위한 후크가 포함되어 있을 수 있습니다.
리액트 훅에 관한 훌륭한 비디오입니다.완전 추천
리액트 커스텀 훅을 사용하는 이유에는 다음과 같은 차이점과 문제가 있습니다.
- ''라고 하면 '고치다'라고 하면 '고치다'라고 하면 '고치다'라고 수 있을 것 요.
useCallBack매번 새로운 기능을 만들지 않도록 리액션을 하도록 하지만 우리가 해결할 주요 문제는 아닙니다. - 리액션 문서에서 온라인 친구를 추적하는 간단한 예와 함께 논의한 주요 문제는 동일한 논리를 다른 기능 컴포넌트에 복사 붙여넣는 것을 피하는 것입니다.이러한 논리도 스테이트풀해야 합니다.
- 경우, 「이러한 기능」을 사용하고 있는 .
useCallBack매번 새로운 기능을 만드는 것을 피하기 위해 우리는 문제를 해결하지 못했습니다.왜냐하면 모든 컴포넌트에서 이 로직도 복사해야 하기 때문입니다.그래서 이것이 문제를 해결하지 못했습니다. - 또 다른 해결책은 이 논리를 처리하기 위해 기능 컴포넌트 외부에 함수를 만드는 것입니다만, 큰 문제가 있습니다.컴포넌트 외부에 있는 정상적인 함수에서는 이 구현된 논리는 스테이트풀하고 반응 컴포넌트 내에서만 스테이트에 액세스 할 수 있기 때문입니다.
그렇다면 해결책은 무엇일까요?네, 커스텀 리액트 훅!
- 이것은 다른 리액트 내장 후크를 사용하는 스테이트 풀 함수입니다(예:
useState,useCallbacketc는, 및 붙여넣기를 할 수 .etc)는, 같은 카피 및 를 회피할 수 있습니다. - 이 방법을 사용하면 반응의 상태 저장 기능을 활용하면서 다른 함수의 컴포넌트 외부에 논리를 배치할 수 있습니다.
이 답변이 당신의 문제를 해결하고 모호함을 해소하기를 바랍니다.
React 문서에서:
사용자 지정 후크는 이름이 "use"로 시작하고 다른 후크를 호출할 수 있는 JavaScript 함수입니다. [...] 이름은 항상 "use"로 시작해야 후크 규칙이 적용됨을 한눈에 알 수 있습니다.
그렇다면 특별한 "사용" 이름 접두사를 사용하여 사용자 지정 후크를 정의하는 이유는 무엇입니까?
1) 이러한 기능은 React와 함께 사용되며 암묵적인 계약(상기 규칙)을 준수하도록 의도되어 있음을 소비자에게 알립니다.
2) 이러한 규칙을 확인하고 시행하는 툴 지원을 받을 수 있습니다.예를 들어, 는 "use" 프리픽스로 시작하는 함수와 후크 뒤에 대문자로 시작하는 함수를 가정하는 휴리스틱을 사용합니다.
Hooks 비커스텀는 '(스텀)'으로 해야 합니다.use 에 따라 절차도 수행합니다.반응하다
1) 후크는 React code에서만 호출되며 일반 JS 기능에서는 호출되지 않습니다.따라서 Hooks의 범위는 React 코드 월드에 한정되어 있으며 React 코드로 많은 작업을 수행할 수 있는 더 강력한 기능을 가지고 있습니다.JS보다는 일반 함수를 응용 프로그램에서 사용할 수 있지만 리액트 코드 가이드라인은 리액트 구문에 맞춰 코드를 더 정렬시킵니다.
2) 클래스 베이스의 컴포넌트에서는 Hooks는 동작하지 않지만, 통상의 기능은 동작합니다.
에서는 3) JS에 수 .useState,useEffect,useContext반응하는 커스텀 훅에서는 할 수 있습니다.
커스텀 후크는 다른 후크에 의존합니다.설계상 리액트 훅은 컴포넌트의 렌더링 방식에서 사용됩니다.다른 곳에서 훅을 사용하려고 하면 경고가 나옵니다.커스텀 훅은 같은 방법으로 사용해야 하기 때문에 내장 훅과 같은 규칙을 따릅니다.use의 맨 훅 함수를 하기 위한 입니다.
후크 함수에 원하는 이름을 붙일 수 있지만 이미 언급했듯이 렌더링 방식 이외의 방법으로 사용할 경우 React에서 경고를 받게 됩니다.
당신은 그것을 무엇이든 부를 수 있고 그것은 여전히 잘 작동할 거야.유일한 장점은 "useName" 규칙을 사용하는 경우 React가 후크 규칙을 올바르게 준수하는지 여부를 검사한다는 것입니다.작업을 조금 더 쉽게 할 수 있습니다.
커스텀 훅이나 훅은 일반적으로 리액트 컴포넌트와 관련된 모든 작업을 수행해야 하는 경우에 사용되며, 다른 유틸리티 함수는 리액트 상태에 얽매이지 않고 리액트 상태 로직이 있는 영역입니다.
커스텀 훅의 예로는 navigateToHome, navigateToCheckout 등의 네비게이터 기능 목록을 사용할 수 있는 customNavigation을 들 수 있습니다.따라서 코드의 다른 부분에서 홈페이지로 라우팅할 때는 이 훅만 사용합니다.또한 분석 및 부작용과 같은 논리/기능도 navig To Home 기능의 일부가 될 수 있습니다.
Util 함수의 예로는 react 또는 react component와 아무런 관련이 없는 대문자와 같은 것이 있습니다.navigator라는 유틸리티 함수를 생성하고 useNavigation을 추가할 수 없습니다.
제가 보기에 커스텀 훅은 고유의 목적과 접근법이 있습니다.즉, 경우에 따라서는 기능이 아닌 커스텀 훅을 만들고 싶은 경우가 있습니다.
예를 들어 로컬 저장소에 데이터를 저장해야 하는 경우 해당 데이터를 위한 사용자 지정 후크를 생성하여 "useLocalStorage"라고 부르고 구성 요소를 생성하려는 경우 페이지 양식이라고 가정하면 함수 구성 요소를 쓸 수 있습니다.
차이점은 후크는 컴포넌트가 아니며 UI에 아무것도 표시되지 않는다는 것입니다.그것은 단순히 논리적인 연산이다.
위의 "논리적인" 예와는 다른 것으로 간주되는 이유는 커스텀훅은 다른 커스텀훅 관련 후크를 사용할 수 있도록 하는 점에서 고유하기 때문입니다.예를 들어 커스텀훅에서만 동작할 수 있는 "useDebugValue"가 있습니다.
이상한 점은 React가 기능을 커스텀 훅과 구별하는 방법인데, 이것이 혼란의 주요 원인이라고 생각합니다.기능명을 「체크」해, 「use」로 시작하면 커스텀 훅이 됩니다.보다 나은 선택이라고 생각되는 것은 "constant" 선언을 "hook" 선언으로 변경하거나 고유한 유형을 지정하는 것입니다.
TL;DR, 커스텀 훅은 논리이며 "useDebugValue"와 같은 훅을 사용할 수 있으며, 이 기능은 대부분 UI와 관련되어 있습니다.
언급URL : https://stackoverflow.com/questions/60133412/react-custom-hooks-vs-normal-functions-what-is-the-difference
'source' 카테고리의 다른 글
| 조롱하는 모멘트()와 모멘트().형식은 joke를 사용합니다. (0) | 2023.03.06 |
|---|---|
| 스프링 부트에서의 복수 Data Source 및 Jdbc Template (> 1.1.0) (0) | 2023.03.06 |
| JQuery Ajax - Ajax 호출 시 네트워크 연결 오류를 감지하는 방법 (0) | 2023.03.06 |
| 워드프레스와 같은 CodeIgniter의 템플릿 시스템? (0) | 2023.03.06 |
| JUnit 테스트 중 응용 프로그램/CommandLineRunner 클래스 실행 방지 (0) | 2023.03.06 |