분류 전체보기104 [React] React의 선언형 프로그래밍과 UseImperativeHandle 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 React의 선언형 프로그래밍과 UseImperativeHandle React는 기본적으로 선언형 프로그래밍을 권장하는데, 이는 jsx를 활용해 ui를 표현하는 방식에서도 잘 드러난다. export const Component = ({title, description}) => ( {title} {description} ); 선언형 프로그래밍은 '무엇을' 하는지에 집중하며, 추상화를 통해 구현의 세부사항을 숨길수가 있다. 아래의 함수형 프로그래밍은 선언형의 한 예시다 const sum = (a, b) => a + b; // "무엇을" 하는지 명시 반면 명령형 프로그래밍은 '어떻게' .. 2024. 1. 5. [React] 사용자 입력에 따른 검색 결과 업데이트 시 useTransition으로 사용자 경험 개선하기 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 useTransition으로 사용자 입력에 따른 업데이트 시 사용자 경험 개선하기 사용자가 검색어를 입력하면 추천 검색어를 띄워줄 때 처럼 사용자 입력에 따른 비동기 요청을 수행하는 경우, 이를 최적화 하는데는 여러 방법이 있다. 오늘은 react 18버전에 업데이트 된 useTransition() hook으로 사용자 경험을 개선해보고, 기존에 업데이트 지연을 위해 사용하던 debounce와는 어떤 차이점이 있는지 알아볼 것이다. import { useState, useEffect } from 'react'; const SearchComponent = () => { const [q.. 2023. 12. 27. [React] 오픈소스 살펴보기_Hook의 update 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 Hook의 update 지난 시간에는 hook이 호출된 순서대로 연결리스트에 추가돼 순서가 보장되는 것을 살펴보았다. 오늘은 hook이 상태를 변경하고 컴포넌트를 리렌더링하는 과정을 알아보자. // reconciler > ReactFiberHooks.js function dispatchAction(fiber, queue, action) { const alternate = fiber.alternate if ( fiber === currentlyRenderingFiber || (alternate !== null && alternate === currentlyRenderingFiber).. 2023. 12. 15. [React] 오픈소스 살펴보기_Hook 객체의 탄생 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 Hook 객체의 탄생 지난 시간에는 개발자가 hook 함수를 호출했을 때 react가 그 hook의 구현체를 찾는 여정을 따라가보았다. 오늘은 대표적인 hook useState()를 통해 hook 객체의 탄생 과정을 살펴보자. // reconciler > ReactFiberHooks.js // 인자로 받은 initialState는 함수형 컴포넌트에서 해당 상태의 최초값이다. function mountState(initialState) { // 새로운 hook 객체를 생성하고 현재 처리 중인 hook 리스트에 추가한다. const hook = mountWorkInProgressHoo.. 2023. 12. 6. [React] 오픈소스 살펴보기_Hook의 구현체를 찾아서 공부한 내용을 정리한 글입니다 내용에 오류가 있거나 더 좋은 의견이 있다면 댓글로 남겨주세요. 배움에 큰 도움이 됩니다. 🖋 1-1. Hook의 구현체를 찾아서 함수형 컴포넌트에서 useState나 useEffect등의 hook을 불러오는 import문은 일상속의 물처럼 코드에 자연스럽게 스며들어 있다. Hook은 마치 물 속에 있는 수소2 + 산소1의 물 분자처럼 컴포넌트를 구성한다. 그런데 이 hook들은 react 내부에 어떻게 구성되어 있을까? 오늘 react 패키지 내부 구조를 탐험하며 내부에 어떤 일들이 일어나고 있는지 알아보자. 개발자가 hook을 불러오면 react는 다음 순서로 구현체를 찾아간다. 하나씩 차근히 알아보자. 1. 개발자 개발자가 컴포넌트에서 react 객체가 제공하는 hoo.. 2023. 12. 1. 이전 1 2 3 4 ··· 21 다음
