프론트엔드/React
-
React - useRef프론트엔드/React 2024. 10. 30. 23:58
useRef는 **React의 훅(hook)**으로, DOM 요소를 직접 참조하거나 컴포넌트의 상태를 저장할 때 사용됩니다.일반적인 상태(useState)와 달리 컴포넌트가 리렌더링돼도 값이 초기화되지 않으며, 리렌더링을 트리거하지 않는 점이 특징입니다.useRef 기본 사용법import { useRef } from 'react';function MyComponent() { const inputRef = useRef(null); // 초기 값: null const handleFocus = () => { inputRef.current.focus(); // input 요소에 포커스 }; return ( Focus Input );}코드 동작useRef(null)..
-
React 18의 Concurrent Mode프론트엔드/React 2024. 7. 8. 11:15
React 18에서 도입된 Concurrent Mode는 사용자 인터페이스를 더 빠르고 반응성 있게 만드는 새로운 기능입니다. Concurrent Mode는 React 애플리케이션이 더 나은 성능과 사용자 경험을 제공할 수 있도록 돕는 여러 가지 개선 사항과 새로운 기능을 포함합니다.Concurrent Mode의 주요 개념Interruptible Rendering (중단 가능한 렌더링):렌더링 작업을 여러 프레임에 걸쳐 분할하여, 더 중요한 작업이 있을 때 렌더링을 중단하고 다시 시작할 수 있게 합니다. 이는 사용자가 느린 작업으로 인해 UI가 멈추는 경험을 방지합니다.import { useState, useEffect } from 'react';function App() { const [items, ..
-
reactStrictMode에 대해서프론트엔드/React 2024. 2. 2. 14:20
reactStrictMode에 대해서 reactStrictMode는 React의 Strict Mode를 활성화 또는 비활성화하는 옵션입니다. Next.js에서는 next.config.js 파일을 통해 프로젝트의 환경 설정을 지정할 수 있습니다. React Strict Mode는 개발 모드에서 애플리케이션을 실행할 때 렌더링 과정에서 일부 경고를 발생시키고, 몇 가지 부수 효과를 검사하여 애플리케이션에서 발생할 수 있는 잠재적인 문제를 감지합니다. 주로 개발자들이 애플리케이션의 품질을 향상시키고 디버깅을 도와주는 용도로 사용됩니다. useEffect혹은 console.log가 2번 실행되는 경우 해결방법 - 첫번째 useEffect(() => { }, []} // 의존성 배열을 추가하지 않은 경우 - 두번..