728x90 300x250 SMALL react10 커스텀 훅 만들기 커스텀 훅 이란?커스텀 훅은 React의 기본 훅(useState, useEffect, useReducer 등) 을 활용하여 재사용 가능한 로직을 함수로 추출한 것이다. 이를 통해 여러 컴포넌트에서 공통된 로직을 손쉽게 공유할 수 있다.즉 기존에 있는 React 훅을 이용해서 새로운 훅을 만들고 이름을 use로 시작하면 커스텀 훅(Custom Hook)이 된다. 커스텀 훅 만들기 예제1. useCounter 커스텀 훅 만들기import { useState } from 'react';// 커스텀 훅 정의function useCounter(initialValue = 0) { const [count, setCount] = useState(initialValue); const increment = () =.. 2024. 12. 10. 리액트 : 훅의 규칙 훅은 두 가지 지켜야 할 규칙이 있다. 첫 번째는 훅은 무조건 최상위 레벨에서만 호츨해야 한다.두 번째는 리액트 함수 컴포넌트에서만 호출해야 한다.여기에 대해서 자세히 알아보자 1. 최상위 레벨이서만 호출이 규칙은 React가 훅 호출 순서를 기반으로 상태와 이펙트를 관리하기 때문이다.반복문, 조건믄, 중첩된 함수 안에서 훅을 호출하면 렌더링 순서가 변할 가능성이 생기기 때문에 React의 내부 상태 관리가 꼬일 수 있다. 잘못된 예시if (condition) { const [state, setState] = useState(0); // 조건문 내부에서 훅 호출 X} 옳은 예시const [state, setState] = useState(0); // 최상위 레벨if (condition) { /.. 2024. 12. 9. 이전 1 2 3 다음 728x90 반응형 LIST