front/react (4) 썸네일형 리스트형 React 19 톺아보기 - use 스터디의 두 번째 주제로 정한 hook은 use였다.이번 주는 갓생 살기로 다짐해서 나름 열심히 공부해 봤다. 1. Useconst value = use(resource); Promise나 Context와 같은 데이터를 참조하는 hook. 다른 React hook과 달리 use는 조건문과 반복문 내부에서 호출이 가능하다.다만, 컴포넌트 또는 훅 안에서만 호출해야 한다. resource : 참조 데이터. Promise나 Context일 수 있다.Promise나 Context에서 참조한 값을 반환한다. 1) Context 참조import { createContext, useState } from "react";import ThemeDisplay from "../components/ThemeDisplay".. React 19 톺아보기 - useTrasition 항해 플러스 부트캠프가 완료되고, 항해 사람들끼리 비대면 스터디를 진행하기로 했다.주제는 React19 톺아보기로 한 달 동안 진행하기로 했다! 신규 메서드 혹은 hook을 살펴보고,실무에 도입할만한 메서드가 있는지, 기존 코드를 어떻게 효율적으로 개선할 수 있을지 고민하는 것이 목표이다. 첫 주자차에는 hook을 살펴보며 어떤 변화가 있었는지 이야기하는 시간을 가졌다.대체로 "굳이 왜 사용해야 하는지 모르겠다"는 의견이 강했다.그래서 그 중 메서드들을 몇 개 꼽아서 실제로 구현해 보기로 했다.사용해 보면 다를 수도 있으니까! 처음 선택한 메서드는 useTransition이다. 1. UseTransitionconst [isPending, startTransition] = useTransition() u.. [React] React Hooks 항해 플러스 과제를 진행하기 전 React Hooks에 대해서 미리 공부하려 한다.이미 알고 있었고 많이 사용해 본 것들이지만, 공부하면서 새롭게 알게 된 사실들도 있어서 포스팅까지 하게 되었다. 특히 아무 생각 없이 사용했던 방식들을 "왜" 이렇게 써야만 하는지 알 수 있었다! 1. React HooksReact 16.8에 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수들을 말한다.Hooks을 사용하면 클래스 컴포넌트를 작성하지 않고도 React의 다양한 기능을 활용할 수 있다. 1) 등장배경React Hooks는 클래스 컴포넌트에서 발생하던 여러 문제를 해결하기 위해 등장했다. 컴포넌트 간 상태 로직 재사용의 어려움복잡한 컴.. [React] VirtualDOM 1. VirtualDOM이 생겨난 배경웹 개발에서 DOM(Document Object Model)은 HTML 문서를 개체로 표현한 구조를 말한다.전통적인 방식으로는 웹 페이지 내용이 변경될 때마다 실제 DOM에 접근해 직접적으로 업데이트를 진행한다.하지만, 이 과정에서 DOM 조작은 성능상의 부담을 줄 수 있다. 이러한 문제를 해결하기 위해 나온 것이 Virtual DOM(가상돔)이다. 1) 렌더링 과정에서의 성능 저하이는 브라우저 렌더링 과정을 알면 이해하기가 편하다.브라우저 렌더링은 DOM 트리 생성 > CSSOM 생성 > 렌더 트리 생성 > 레이아웃 > 페인트 과정을 거치게 된다.DOM을 조작하게 되면, 위의 렌더링 과정이 다시 시작될 수 있다. 즉, 해당 돔의 속성을 다시 그려야 할 수 있는 .. 이전 1 다음
