728x90 300x250 SMALL Front-end/React115 리액트에서 "함수형 업데이트"를 사용하는 이유 () => React에서는 상태 값을 직접 수정하지 않고, 항상 "함수"를 통해 새로운 값을 계산하도록 권장한다. 함수형 업데이트는 이런 철학을 따른다. 1. 상태를 기존 값 기반으로 안전하게 계산하기 위해2. React의 비동기적 상태 업데이트 특성을 안정적으로 처리하기 위해 함수형 업데이트 사용 예시const [count, setCount] = useState(0);// 함수형 업데이트 사용setCount((prevCount) => prevCount + 1); 함수형 업데이트를 사용하는 이유 보통 React의 상태 업데이트는 아래와 같이 단순한 값을 넘겨주는데setCount(count + 1); 이때, count는 현재 컴포넌트 렌더링에서 고정된 값이다.하지만 React의 상태는 비동기적으로 작동하기 때문에 .. 2024. 12. 13. 훅을 사용한 컴포넌트 - 비공개 보호되어 있는 글 입니다. 2024. 12. 12. 훅 사이에 데이터 공유하기 훅의 각 호출은 상태와 동작이 독립적이며 서로 간섭하지 않는다.그렇다면 훅 사이에서 데이터를 공유하려면 어떻게 해야 할까? 훅 사이에서 데이터를 공유 하는 방법은 몇가지가 있는데 주로 다음과 같은 방식이 있다.상태(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 ··· 17 18 19 20 21 22 23 ··· 29 다음 728x90 반응형 LIST