2024/09/29 2

React 상태 관리 : 함수형 업데이트 vs 직접 참조 (안전한 상태 업데이트 방법)

React에서 상태 관리는 컴포넌트가 동작하는 데 중요한 역할을 합니다. 하지만 상태 업데이트가 비동기적으로 이루어지기 때문에 최신 상태 값을 기반으로 안전하게 업데이트 하는 방법이 필요합니다. 함수형 업데이트와 직접 참조의 차이점직접 참조 방식 *setData([...data,tempdata]);설명 : 이 방식은 현재 상태값인 data를 직접 사용하여 새 데이터를 배열에 추가합니다.작동은 하지만 React의 상태 업데이트는 비동기적으로 작동하기 때문에 이 방식은 최신 상태를 참조하지 않을 수 있습니다.위험성 : 다른 상태 업데이트가 비동기적으로 발생할 경우 이전 상태가 참조될 가능성이 있어 데이터 손실이나 충돌이 발생할 수 있습니다.함수형 업데이트 방식 *setData((datas)=> [...dat..

Front-end/React 2024.09.29

리액트 훅 useRef

useRef란 ?useRef는 React Hook 중 하나로 컴포넌트의 DOM 요소나 변수에 대한 참조를 저장할 수 있는 방법입니다.useState와는 다르게 렌더링을 발생시키지 않고도 값을 유지할 수 있습니다. useRef의 주요 용도DOM 요소에 접근주로 HTML 요소에 접근하여 포커스를 주거나 스크롤을 제어하거나 입력 필드의 값에 접근하는 등의 작업을 할 때 사용됩니다.렌더링 간 값 유지state를 업데이트할 때는 컴포넌트가 재 렌더링 되지만 useref는 렌더링을 발생시키지 않고 값을 유지함 useRef 사용 예시 (DOM 요소에 접근)입력 필드에 포커스주기 해당 버튼을 누르면 ref.current.focus()가 호출되어 입력 필드에 포커스 자동 설정  useRef로 렌더링 없이 값 관리하기 r..

Front-end/React 2024.09.29