[노트장] 적으며 정리해 보는 이론/리액트문서14 [Hook] useDeferredValue (리렌더링 속도가 느릴때.) ◼ useDeferredValue useDeferredValue는 React Hook으로, UI 일부를 지연시킬 수 있게 해줍니다. 예를 들어, 사용자가 입력한 내용에 따라 화면의 일부를 변경하는 경우, 입력이 바뀔 때마다 전체 UI를 다시 렌더링하는 것은 비효율적일 수 있습니다. 이 때 useDeferredValue를 사용하면 입력 값의 변경을 느리게 반영하여 사용자 경험을 향상시킬 수 있습니다. 간단히 말해, useDeferredValue는 입력이 바뀔 때마다 바로바로 UI를 갱신하는 것이 아니라, 입력이 변경되었음을 알리고 일부 업데이트를 지연시킵니다. 이로써 사용자가 입력하는 동안 UI가 끊김 없이 부드럽게 유지될 수 있습니다. 예를 들어, 사용자가 검색어를 입력하면 해당 검색어에 따라 결과를 보.. 2024. 4. 18. [리액트공식문서] State를 보존하고 초기화하기 학습내용 React가 언제 state를 보존하고 언제 초기화하는지 어떻게 React가 컴포넌트의 state를 초기화하도록 강제할 수 있는지 key와 타입이 state 보존에 어떻게 영향을 주는지 ◼ State 렌더트리에 위치를 바라봅니다 React는 컴포넌트가 UI트리에서 그 자리에 렌더링되는 한 state를 유지합니다. 하지만, UI트리에서 그 자리에 다른 컴포넌트가 랜더링 되거나 제거를 하게되면 그 state를 제거합니다. React는 트리의 동일한 컴포넌트를 동일한 위치에 렌더링하는 동안 상태를 유지합니다. 이 둘은 각각 트리에서 자기 고유의 위치에 렌더링되어 있으므로 분리되어있는 카운터입니다. 카운터 버튼을 클릭시 해당 컴포넌트만 갱신되는 것을 확인 할수 있습니다. [중요] 두번째 counter를.. 2024. 4. 3. [리액트공식문서][상호작용성 더하기] 배열 State 업데이트하기 ◼ state를 설정하면 렌더링이 동작합니다. JavaScript에서 배열은 다른 종류의 객체입니다. 객체와 마찬가지로 React state에서 배열은 읽기 전용으로 처리해야 합니다. 즉 arr[0] = 'bird'처럼 배열 내부의 항목을 재할당해서는 안 되며 push()나 pop()같은 함수로 배열을 변경해서는 안됩니다. 비선호 (배열을 변경) 선호 (새 배열을 반환) 추가 push, unshift concat, [...arr] 전개 연산자 (예시) 제거 pop, shift, splice filter, slice (예시) 교체 splice, arr[i] = ... 할당 map (예시) 정렬 reverse, sort 배열을 복사한 이후 처리 (예시) 또는 두 열의 함수를 모두 사용할 수 있도록 하는 Im.. 2024. 4. 1. [리액트문서보기][API참고] Hook의 개요, Hook의 규칙 ◼ HOOK 이란? Hook은 React 버전 16.8부터(2019년) React 요소로 새로 추가되었습니다. React Hook은 함수 컴포넌트에서 React의 기능을 사용할 수 있게 해주는 함수입니다. 함수 컴포넌트에서 클래스 컴포넌트의 기능과 유사한 기능들을 사용할 수 있도록 도와주는 도구입니다. 이전에는 클래스 컴포넌트에서만 가능했던 상태(state) 관리, 생명주기 메서드 사용, 그 외의 다양한 기능들을 함수 컴포넌트에서도 사용할 수 있도록 해줍니다. React Hook은 함수 컴포넌트 내에서만 사용됩니다. 주요한 몇 가지 Hook으로는 useState, useEffect, useContext 등이 있으며, 각각 상태 관리, 부수 효과 처리, 컨텍스트(context) 사용 등을 담당합니다. 함수.. 2024. 3. 27. [리액트문서보기][본문 보단..단어를 더 찾아본] state 업데이트 큐[batching,State Queue ] ◼ 요약 state를 설정하더라도 기존 렌더링의 변수는 변경되지 않으며, 대신 새로운 렌더링을 요청합니다. React는 이벤트 핸들러가 실행을 마친 후 state 업데이트를 처리합니다. 이를 batching 이라고 합니다. 하나의 이벤트에서 일부 state를 여러 번 업데이트하려면 setNumber(n => n + 1) 업데이터 함수를 사용할 수 있습니다. [참고] https://react.dev/learn/queueing-a-series-of-state-updates https://www.youtube.com/watch?v=h4puoo_XhPM&list=PLjQV3hketAJkh6BEl0n4PDS_2fBd0cS9v&index=20 state 업데이트 큐는 본문보다는 단어가 뜻하는 것을 이해하지 못해 단.. 2024. 3. 27. [리액트문서보기][상호작용성 더하기] 스냅샷으로서의 State 학습내용 state 설정으로 리렌더링이 동작하는 방식 state 업데이트 시기 및 방법 state를 설정한 직후에 state가 업데이트되지 않는 이유 이벤트 핸들러가 state의 “스냅샷”에 접근하는 방법 ◼ state를 설정하면 렌더링이 동작합니다. 클릭과 같은 사용자 이벤트에 반응하여 사용자 인터페이스가 직접 변경된다고 생각할 수 있습니다. React에서는 이 멘탈 모델과는 조금 다르게 작동합니다. 이전 페이지에서 state를 설정하면 React에 리렌더링을 요청하는 것을 보았습니다. 즉, 인터페이스가 이벤트에 반응하려면 state를 업데이트해야 합니다. import { useState } from 'react'; export default function Counter() { const [numbe.. 2024. 3. 26. [리액트문서보기][상호작용성 더하기] 렌더링 그리고 커밋 학습내용 React에서 렌더링의 의미 React가 컴포넌트를 언제, 왜 렌더링 하는지 화면에 컴포넌트를 표시하는 단계 렌더링이 항상 DOM 업데이트를 하지 않는 이유 ◼ 랜더링 React와 같은 라이브러리 또는 프레임워크에서 "렌더링"은 UI 요소를 생성하고 이를 화면에 표시하는 과정을 의미합니다. UI요소를 생성하는 과정은 사용자가 보는 웹 페이지나 어플리케이션의 구성 요소를 만드는 과정을 의미합니다. 이것은 HTML 요소, CSS 스타일, 그리고 JavaScript 코드를 사용하여 웹 페이지의 레이아웃과 디자인을 결정하는 것을 포함합니다. 또한, 컴포넌트의 상태나 속성이 변경되면, React는 해당 컴포넌트의 JSX를 다시 렌더링하여 새로운 UI를 생성하며, 새로운 UI를 생성할 때 기존 UI는 메모.. 2024. 3. 26. [리액트문서보기][상호작용성 더하기] State: 컴포넌트의 기억 저장소 학습내용 useState 훅으로 state 변수를 추가하는 방법 useState 훅이 반환하는 한 쌍의 값 둘 이상의 state 변수를 추가하는 방법 state를 지역적이라고 하는 이유 ◼ state 업데이트 하는 법 컴포넌트를 새로운 데이터로 업데이트하기 위해선 다음 두 가지가 필요합니다. 렌더링 사이에 데이터를 유지합니다. React가 새로운 데이터로 컴포넌트를 렌더링하도록 유발합니다. useState 훅은 이 두 가지를 제공합니다. 렌더링 간에 데이터를 유지하기 위한 state 변수. 변수를 업데이트하고 React가 컴포넌트를 다시 렌더링하도록 유발하는 state setter 함수(state 설정자 함수) ◼ state 변수 추가하기 useState를 사용하여 state를 추가, 업데이트를 합니다... 2024. 3. 26. [리액트문서보기][상호작용성 더하기] 이벤트에 응답하기 학습내용 이벤트 핸들러를 작성하는 여러가지 방법 이벤트 핸들링 로직을 부모 컴포넌트에서 전달하는 방법 이벤트가 전파되는 방식와 이를 멈추는 방법 ◼ 이벤트 핸드러 추가하기 이벤트 핸들러 추가를 위해서는 먼저 함수를 정의하고 이를 적절한 JSX 태그에 props 형태로 전달 해야 합니다. // 함수형 export default function Button() { function handleClick() { // Button 외부에 있어도됨(참조할 값 유무에 따라) alert('You clicked me!'); } return ( Click me ); } // 인라인 형 이벤트 핸들러 함수는 다음 특징을 가집니다 - 주로 컴포넌트 내부에서 정의됩니다. - handle로 시작하고 그 뒤에 이벤트명을 붙인 함수.. 2024. 3. 25. [리액트문서보기][UI 표현하기]컴포넌트 순수하게 유지하기 ◼ 순수함수 자바스크립트 일부 함수는 순수합니다. 순수 함수는 오직 연산만을 수행합니다. 컴포넌트를 엄격하게 순수함수로 작성하면 코드베이스가 점점 커지더라도 예상밖의 동작이나 당황케하는 버그를 피할 수 있습니다. React는 이러한 컨셉 기반에 설계되었습니다. React는 작성되는 모든 컴포넌트가 순수 함수일 거라 가정합니다. 이러한 가정은 작성되는 React 컴포넌트가 같은 입력이 주어진다면 반드시 같은 JSX를 반환한다는 것을 의미합니다. 순수 함수란 두 가지 중요한 특성을 갖습니다 함수는 같은 입력에 대해 항상 같은 출력을 반환합니다. ( 붕어빵 틀에 동일한 재료를 넣으면 항상 동일한 모양과 크기의 붕어빵이 나오는 것과 같이, 함수에 동일한 입력 값을 넣으면 항상 동일한 출력 값을 얻습니다. 이것이.. 2024. 3. 25. 이전 1 2 다음
