728x90 300x250 SMALL 분류 전체보기1117 리액트 : 훅의 규칙 훅은 두 가지 지켜야 할 규칙이 있다. 첫 번째는 훅은 무조건 최상위 레벨에서만 호츨해야 한다.두 번째는 리액트 함수 컴포넌트에서만 호출해야 한다.여기에 대해서 자세히 알아보자 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. useRef와 useState의 차이 React에서 useRef와 useState는 상태를 관리하고 요소를 참조하는데 사용되지만, 목적과 동작 방식이 다르다. 1. useRefuseRef는 React의 훅으로, DOM 요소나 변경 가능한 값을 참조할 때 사용된다. 특징값이 변경되어도 렌더링을 트리거하지 않음 : useRef로 저장된 값은 변경되더라도 컴포넌트가 다시 렌더링되지 않음초기화 : useRef는 인자로 초기값을 받을 수 있으며, 초기값은 .current프로퍼티로 접근할 수 있다.DOM 참조 : 주로 특정 DOM요소를 참조하거나 저장하기 위해 사용된다.변경 가능한 값 저장 : 렌더링 관련 없이 값을 유지하고 싶을 때 사용된다.사용 예시 1. DOM 참조 import React, { useRef } from "react";const A.. 2024. 12. 6. 이전 1 ··· 14 15 16 17 18 19 20 ··· 280 다음 728x90 반응형 LIST