React
-
[React] ErrorBoundary가 이벤트 핸들러와 비동기적 코드를 감지하지 못하는 이유React 2025. 3. 15. 22:51
이 글은 ErrorBoundary의 기본적인 개념을 알고있다는 전제 하에 진행하겠습니다.(추후 에러바운더리 및 그 한계와 계층적 에러바운더리에 대한 글을 써보겠습니다.) ErrorBoundary가 잡을 수 있는 에러인지 아닌지 판단하는 기준은 ErrorBoundary 실행 컨텍스트 입니다.그 안에 있다면 잡을 수 있고, 그 안에 없다면 잡을 수 없습니다. 에러바운더리는 다음과 같은 에러를 포착하지 못합니다. 저는 지금까지 위와 같은 사항을 단순 암기했었는데요.현재 제가 지내고 있는 우아한 테크 코스의 코치인 시지프의 글을 보며 위 사항이 자바스크립트의 실행 컨텍스트를 알면 그럴 수 밖에 없다는 것을 알게되었습니다. 네 가지 사항 중 에러바운더리가 이벤트 핸들러와 비동기적 코드를 감지하지 못하는 이유에 ..
-
변경에 유연한 컴포넌트 설계React 2024. 6. 17. 20:04
우리는 귀에 딱지가 앉도록 듣는 말이 있습니다.‘컴포넌트를 잘 설계해야 한다.’ 컴포넌트 설계 기준이 뭔지 같이 한 번 살펴봅시다. 컴포넌트 설계…?설계의 뜻이 뭘까요? 음..컴포넌트를 ‘만든다’로 쉽게 생각해도 될 것 같아요. 컴포넌트 설계를 ‘잘’ 설계한다 = 컴포넌트를 ‘잘’ 만든다. ‘잘’ 그럼 컴포넌트를 잘 만든다는건 어떤 의미일까요? 컴포넌트를 잘 나누는 것일까요?그렇다면 컴포넌트를 나누는 이유는 뭘까요?재사용 가능하게 나눠야한다는 뜻일까요? 컴포넌트의 뜻부터 같이 알아보죠. 좀 더 개발적인 의미로 들어가볼까요? 리액트 공식문서를 살펴보니, UI를 구성하는 요소라고 하네요. 우리가 흔히 말하는 컴포넌트를 재사용한다는 의미가, 결국 UI를 재사용하기 위해 컴포넌트를 잘 만들어야한다고 ..
-
이미지 최적화 후 Lighthouse로 성능 검사하기React 2024. 5. 10. 13:44
먼저 Lighthouse는 무엇이며, 뭐하는 친구인지 알아보자. Lighthouse란 구글에서 개발한 웹 페이지의 품질을 개선할 수 있는 오픈 소스 형태의 자동화 도구이다. Lighthouse에서 확인할 수 있는 지표는 아래와 같다.First Contentful PaintFCP사용자가 특정 웹 페이지로 이동했을 때, 브라우저가 첫 번째 DOM의 콘텐츠를 렌더링하는 데 걸리는 시간First Meaningful PaintFMP사용자가 페이지를 불러오기 시작하면서 스크롤을 내리지 않은 채 제일 먼저 볼 수 있는 영역에 존재하는 주요한 콘텐츠를 렌더링하는 데 걸리는 시간Speed Index웹 페이지를 불러올 때, 콘텐츠가 시각적으로 표시되는 데까지 걸리는 시간First CPU Idle웹 페이지가 최소한으로 상호..
-
컴포넌트 설계의 진짜 의미React 2024. 4. 23. 17:59
우리는 귀에 딱지가 앉도록 듣는 말이 있습니다.‘컴포넌트를 잘 설계해야 한다.’ 컴포넌트 설계…?설계의 뜻이 뭘까요? 음..컴포넌트를 ‘만든다’로 쉽게 생각해도 될 것 같아요. 컴포넌트 설계를 ‘잘’ 설계한다 = 컴포넌트를 ‘잘’ 만든다. ‘잘’ 그럼 컴포넌트를 잘 만든다는건 어떤 의미일까요? 컴포넌트를 잘 나누는 것일까요?그렇다면 컴포넌트를 나누는 이유는 뭘까요?재사용 가능하게 나눠야한다는 뜻일까요? 컴포넌트의 뜻부터 같이 알아보죠. 좀 더 개발적인 의미로 들어가볼까요? 리액트 공식문서를 살펴보니, UI를 구성하는 요소라고 하네요. 우리가 흔히 말하는 컴포넌트를 재사용한다는 의미가, 결국 UI를 재사용하기 위해 ..
-
모던 리액트 Deep dive - 렌더링은 어떻게 일어나는가? & 메모이제이션React 2024. 3. 19. 13:47
** "리액트에서" 렌더링이란? 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정. 렌더링 과정을 최소한으로 줄여야 유저에게 좋은 경험을 선사할 수 있음. * 리액트의 렌더링이 일어나는 이유 1. 최초 렌더링 2. 리렌더링 클래스형 컴포넌트의 setState가 실행되는 경우 클래스형 컴포넌트의 forceUpdate가 실행되는 경우 함수형 컴포넌트의 useState의 두 번째 배열 요소인 setter가 실행되는 경우 useReducer의 두 번째 배열 요소인 dispatch가 실행되는 경우 컴포넌트의 key props..
-
useContext (ContextAPI) 란?React 2024. 3. 12. 21:01
리액트의 기본적인 데이터 흐름은 부모 컴포넌트에서 자식 컴포넌트에 Props를 전달해주는 형식임. 프로젝트의 규모가 커지면 커질 수록 컴포넌트는 많아질 것이며, 이에 전부 props로 대처할 수는 없음. 또한 어디 한 군데에서 문제가 생긴다면 모든 부모 컴포넌트를 찾아다니며 수정해줄 수가 없음. 이를 해결하기 위해 Context를 제공해줌. 이는 props로 내려줄 필요가 없는 방법. props drilling이 일어나지 않는다는 장점이 있지만, 공식문서에는 props drilling을 피하기 위한 목적이라면 컴포넌트 합성을 먼저 고려하라는 이야기가 나옴 여러 레벨에 걸쳐 props 넘기는 걸 대체하는 데에 context보다 컴포넌트 합성이 더 간단한 해결책일 수도 있습니다. https://ko.lega..
-
언젠가는 쓸 useLayoutEffect... (useEffect vs useLayoutEffect)React 2024. 3. 3. 20:54
리액트에는 참 다양한 훅이 있습니다. 이번에 작성할 훅은 useLayoutEffect입니다. 저는 처음 뵙는 분이라서 많이 생소한데요, 형태가 useEffect와 비슷하니 비교하며 글을 작성하겠습니다. 사용법은 useEffect와 완전히 동일합니다. useEffect와 useLayoutEffect의 차이를 알기 위해서는 우선적으로 render와 paint에 대해서 알아야 합니다. render : DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 paint : 실제 스크린에 Layout을 표시하고 업데이트하는 과정 render는 paint전에 DOM Tree를 구성하고 계산하는 과정이니 결국 paint의 준비 과정으로 볼 수 있습니다. useEffect render -> pain..
-
[React] useRef는 왜 써야하는가?React 2024. 2. 25. 21:57
useState 장점과 변수의 장점을 합친 것. useRef란 레퍼런스를 사용하기 위한 훅. 그렇다면 레퍼런스란? 리액트에서 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체. 레퍼런스 객체에 current 객체가 있음. 이는 현재 참조하고 있는 element. useRef는 그 값이 변하더라도 렌더링을 발생시키지 않는다. 1. 사용법 const exampleRef = useRef(초기값); 2. useRef를 왜 사용해야 하는가? a. 저장공간으로서의 장점 값을 저장할 필요가 있는 변수가 있을 때 사용하면 좋음. 단, UI에 보일 필요가 없는 친구들을. 예시로, import { useState } from "react"; export default function Example1() { const [..