728x90 300x250 SMALL Front-end312 커스텀 훅 만들기 커스텀 훅 이란?커스텀 훅은 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. useRef와 callback Ref 비교하기 useRef와 callback ref는 모두 React에서 DOM 요소를 참조하거나 제어하는 데 사용된다.둘다 비슷한 역할을 하지만 구현 방식과 사용 목적에 차이가 있다. 1. useRefuseRef는 React훅으로, DOM 요소나 변경 가능한 값을 저장하기 위해 사용된다. 특징DOM 요소에 ref 속성으로 전달하여 해당 DOM을 참조한다.React에서 제공하는 ref객체를 반환하며, 해당 객체의 .current 프로퍼티를 통해 요소를 참조한다.정적인 참조를 제공한다. 즉, 컴포넌트가 다시 렌더링되어도 참조는 유지된다.사용 예시import React, { useRef } from "react";const App = () => { const inputRef = useRef(null); // ref 객체.. 2024. 12. 8. Callback Ref : DOM 참조를 더 유연하게 관리 앞서 useRef를 활용해 DOM요소를 참조하는 방법을 살펴봤는데 상황에 따라 정적인 참조 방식으로는 해결하기 어려운 문제가 있을 수 있다. 이럴 때 더 동적이고 유연한 방식으로 DOM참조를 관리할 수 있는 Callback Ref가 유용하다.DOM 요소에 대한 참조를 설정하거나 업데이트 할 때 더 많은 제어권을 가질 수 있다. Callback ref는 React에서 DOM 요소나 컴포넌트의 참조를 관리하는 또 다른 방법으로 useRef와 React.createRef()를 대신해서 사용할 수 있다.일반적으로 React에서 ref를 사용하면 컴포넌트가 DOM요소를 참조하도록 설정할 수 있지만,Callback ref는 동적으로 참조를 설정하거나 특정 동작을 할 때 유용하게 사용된다. 기본 사용법:Callba.. 2024. 12. 7. 이전 1 ··· 10 11 12 13 14 15 16 ··· 78 다음 728x90 반응형 LIST