useEffect 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라고 할 수 있다. ..

리액트 컴포넌트의 라이프사이클과 useEffect

상태 전이는 그 상태 전이의 발생을 알리는 방식의 설계로 무궁무진한 응용 가능성을 갖고 있다.그렇기 위에 꼭 알아둬야 하는 리액트 컴포넌트의 생명주기와, 이를 활용할 useEffect에 대해 알아보자.리액트의 컴포넌트의 생명주기Mount컴포넌트가 탄생하는 순간.화면에 처음으로 렌더링되는 순간.Update컴포넌트가 리렌더링 되는 순간.UnMount컴포넌트가 화면에서 사라지는 순간.컴포넌트가 렌더링에서 제외되는 순간.useEffect리액트에선 각 생명주기 별로 명령을 지정해둘 수 있다.이를 라이프사이클 제어 라고 하며, useEffect() 훅을 통해 구현할 수 있다.리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅.사이드 이팩트란?컴포넌트의 동작에 따라 파생되는 여러 효과 (생명주기 제어 등)useEf..