728x90 300x250 SMALL Front-end/React65 훅 사이에 데이터 공유하기 훅의 각 호출은 상태와 동작이 독립적이며 서로 간섭하지 않는다.그렇다면 훅 사이에서 데이터를 공유하려면 어떻게 해야 할까? 훅 사이에서 데이터를 공유 하는 방법은 몇가지가 있는데 주로 다음과 같은 방식이 있다.상태(state)를 공유하는 방식 : 동일한 상태를 여러 컴포넌트에서 사용할 수 있도록 설정(예 : Context API, Redux 등)상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 : props를 통해 부모에서 자식으로 전달.이를 바탕으로 상태공유와 전역 상태 관리에 대해서 알아보자. 1. 상위 컴포넌트에서 하위 컴포넌트로 상태 전달(Props 사용)React에서 가장 기본적인 데이터 공유 방법은 부모 컴포넌트가 상태(state)를 관리하고, 이를 props로 자식 컴포넌트에 전달하는 것이다... 2024. 12. 11. 커스텀 훅 만들기 커스텀 훅 이란?커스텀 훅은 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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음 728x90 반응형 LIST