useState 2

useState, useEffect - 브라우저 & React의 동작 원리

본 글은 리액트를 빠르게 이해한 후 사용해보고 싶은 백엔드 개발자를 위해 작성되었습니다. 초급 문법 중심이 아닌가장 자주 사용되는 리액트의 훅리액트의 내부 동작원리와 디버깅 시 필요한 기초 지식위주로 작성되었음을 알립니다.현재 나의 프로젝트 핀잇의 경우, 리액트 훅들이 다음과 같은 횟수로 사용되었다. 총 380회 (100.0%)useState 155 (40.8%)useEffect 60 (15.8%)useMemo 53 (13.9%) - DPuseContext 52 (13.7%)useCallback 37 (9.7%) - DPuseRef 23 (6.1%) - 직접 DOM 조작위 통계에서 보듯이, 보통 리액트에서 구현 시 가장 자주 사용되는 핵심 기능으로는 useState와 useEffect라고 할 수 있다. ..

State, 리렌더링, 리액트 훅과 커스텀 훅 - 리액트의 핵심 기능

리액트에서의 State모든 컴포넌트들은 State를 가질 수 있다.현재 State에 따라 렌더링 결과를 다르게 할 수 있다.State의 변화에 따라 렌더링을 다시 하는것을 Re-Rendering이라고 한다.리액트는 변수의 값의 변화로는 리렌더링 되지 않고(버퍼에 담김), State가 변화해야만 즉각적으로 리렌더링을 수행한다.“react” 에서 useState를 import 하는것으로 State를 갖게 할 수 있다.이때, “react”에는 useState만 있는것이 아니므로 다음과 같이 코드를 작성해야 한다import { useState } from "react";state의 구성요소state는 배열, useState() 함수를 통해 얻을 수 있다.state가 처음 생성됐을 땐 [ undefined, f ..