구버전/React
-
[React-Hook-Form] FormData 관리하기구버전/React 2024. 5. 29. 23:45
개요1. 왜 사용해야하는가?2. 주요 함수 간단 정리3. React-Hook-Form 사용법? ✅ Why? 📦 제어 vs 비제어 컴포넌트→ 제어 컴포넌트React에 의해 값이 제어되는 입력 폼 엘리먼트를 뜻하며, 일반적으로 state를 통해서 input값을 받아올 때의 상태를 말한다.실시간으로 값이 동기화되므로 값의 변화에 따라서 리랜더링이발생한다.사용자의 입력 폼이 늘어날수록 랜더링되는 요소가 늘어나 불필요한 연산이 발생한다.유지보수에 힘들고 유효성 검사까지 진행한다면 코드가 매우 길어져 가독성이 나빠진다.const [value, setValue] = useState(""); setValue(e.target.value)}/> → 비제어 컴포넌트React에 의해 값이 제어되지 않는 엘리먼트를 뜻하며,..
-
[React] ErrorBuondary의 사용방법구버전/React 2024. 5. 21. 23:23
개요1. Error Boundary란? ✅ Error Boundary란? 📦 Error BoundaryReact는 어플리케이션 렌더링 과정에서 에러가 발생하면 화면에서 해당 UI를 제거하게 되어 전체 앱이 중단되는 현상이 발생하게 된다. 이러한 현상을 막기위해 새롭게 React 16에서 도입된 기능이 Errorbuondary이다. Errorboundary는 하위요소의 렌더링 중에 throw된 error를 catch하도록 동작하며 오류가 발생한 요소 대신 대체 UI를 표시하게끔 해준다. 하지만 포착하지 못하는 오류도 있어 기본적으로 널리 사용되지는 않는다.포착하지 않는 오류: 이벤트 핸들러, 비동기 코드, 서버 측 렌더링, Errorboundary 자체에서 발생하는 오류(자식요소 X)Life cycle..
-
[React] useLayoutEffect의 활용구버전/React 2024. 4. 2. 20:58
개요 1. useLayoutEffect 2. Usage 3. useLayoutEffect의 성능저하 4. SSR에서 사용이 가능한가? ✅ useLayoutEffect란? 📦 useLayoutEffect(Setup, dependencies?) 브라우저가 화면을 다시 채우기 전에 실행되는 useEffect이며, 성능 저하를 유발할 수 있어 가급적 useEffect를 사용할 것을 공식문서에서는 권장하고 있다. 컴포넌트가 DOM에 추가되기 전에 React는 setup함수를 실행한다. 리랜더링 시: (클린업함수가 정의되어있을 시)cleanup 함수(이전 값ㅋ) → setup함수(새 값) → ( 컴포넌트가DOM에서 제거되기 전) cleanup 함수 실행 의존성을 이전 값과 비교하여 실행할지 말지를 결정하며, 인수가..
-
[React] 18버전의 추가된 새로운 기능 (step- 1)구버전/React 2024. 2. 17. 19:59
📋 개요 useId startTransition, useTransition useDefferedValue useInesrtoinEffect ✅ useId 최상위 수준에서 호출되어 고유 ID를 생성하는 React Hook으로, 접근성 속성에 전달될 수 있다. key 는 데이터 식별을 위해 사용되므로 데이터에서 생성되는 것이 더 바람직하며, 너무 많은 호출이 일어나기 때문이다. 📦 사용하는 이유) 하드코딩의 횟수를 줄이자 컴포넌트를 여러번 사용하더라도 id 속성이 겹치지 않는다. 더보기 예시) 사용자의 이름 정보를 받기 위해 input을 컴포넌트로 받아서 id값을 name이라고 하였다. 이때 이 컴포넌트를 반복해서 사용하게 된다면 id가 name인 input이 여러 개 생기게 되는데 이는 좋은 상황이 아니다..