doeunn.log

Hook React에서 기존에 사용하던 Class형 컴포넌트에서 사용되던 메소드들 없이도 함수형 컴포넌트에서 Hook을 통해 상태 관리와 여러 기능을 사용할 수 있도록 만든 기능입니다. Hook 탄생 배경 React 컴포넌트는 클래스형 컴포넌트 & 함수형 컴포넌트로 나뉘었는데요. 기존의 개발 방식은 일반적으로 함수형 컴포넌트를 주로 사용하되, state나 life cycle method를 사용해야 할 때에만 클래스형 컴포넌트를 사용하는 방식이었습니다. 그렇게 사용했던 이유는 클래스형 컴포넌트의 어려운 클래스 문법, 어려운 축소, 어려운 로직의 재사용성이라는 단점이 존재하지만, state나 life cycle method를 사용하기 위해서는 클래스형 컴포넌트를 사용해야만 했었기 때문인데요. 이러한 불편함을..

보통 React를 배운다고 하면 react-router-dom이라는 라이브러리를 가장 먼저 알게 되는 것 같은데요. 오늘은 이 쓸 줄만 알았던 react-router-dom의 동작원리에 대해서도 알아보고! v6가 되면서 변경된 사항까지도 알아봅시다 :) React Router React에서 Router라는 건, 웹 페이지를 다시 로드하지 않고 (즉, 새로고침 X) 사용자 요청에 따라 애플리케이션의 다른 부분 또는 다른 페이지로 이동하는 프로세스입니다. 그건 그렇다치고... React Router가 필요한 이유는? 여러 페이지를 넘나들 때 웹 페이지를 다시 로드하지 않으면서 이동하기 위해서인데요. React에 router 없이도 페이지 이동은 가능합니다! 다만, 이전 페이지로 돌아온다고 했을 때, 그 이전..

본 포스팅은 아래 글을 토대로 정리된 내용입니다 :) Common mistakes with React Testing Library Some mistakes I frequently see people making with React Testing Library. kentcdodds.com 위 글에서는 다음과 같은 중요도에 따라 레이블을 지정했습니다. 낮음(⭐) : 이것은 대부분 개인적인 의견일 뿐이므로, 자유롭게 무시해도 괜찮을 것이다. 중간(⭐⭐) : 버그를 경험하거나, 신뢰도를 잃거나, 필요치 않은 작업을 하게 될지도 모른다. 높음(⭐⭐⭐) : 꼭 이 조언을 듣자! 신뢰도가 낮거나 문제가 있는 테스트가 있을 수 있다. 1. Testing Library ESLint 플러그인을 사용하지 않음 ⭐⭐ → Te..

Batching state가 변경되면 React에서는 렌더링을 하죠? React에서는 불필요한 리렌더링을 방지하기 위해 state를 변경하는 작업을 일괄적으로 처리합니다. 예를 들어 prev+1을 5번 동시에 작성했다면, 1 2 3 4 5가 아니라 그냥 5 이렇게 됩니다. → 이렇게 state의 업데이트 작업을 일괄 처리하는 방식을 Batching이라고 합니다. 덕분에 불필요한 리렌더링을 방지할 수 있는 것입니다. import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); function increaseCountThree() { // 아래의 작업은 모두 일괄적으로 묶여 처리된다. 한 번의 리렌더링..

일단! Lazy loading의 필요성부터 사용자가 웹 페이지를 열면 SPA에서는 전체 페이지의 내용이 다운로드 되어 단일 이동으로 렌더링됩니다. → 이를 통해 브라우저는 웹페이지를 캐싱할 수 있지만, 사용자가 다운로드한 모든 콘텐츠를 다 본다는 보장은 없죠? 예를 들어, 갤러리 전체 사진을 다운로드했지만 사용자는 첫 번째 이미지만 본 후 서비스를 이탈했을 때 웹 페이지에서는 메모리 및 대역폭 낭비로 이어질 것입니다. 💡 페이지에 접근할 때 모든 콘텐츠를 대량으로 로드하는 대신 사용자가 필요한 페이지의 일부에 접근할 때 그 콘텐츠를 로드할 수 있다면 어떨까요? 즉, 로딩을 지연할 수 있다면? Lazy loading이란? Lazy loading은 페이지를 읽어들이는 시점에 중요하지 않은 리소스 로딩을 미루..

DOM ✔️ DOM(Document Object Model)은 문서 객체 모델이라는 뜻, HTML, XML 문서의 프로그래밍 interface ✔️ 웹 페이지는 일종의 문서(document)라고도 할 수 있는데 ✔️ 이 문서는 웹 브라우저를 통해 그 내용이 해석 → 웹 브라우저 화면에 표시 ✔️ 이때 DOM을 통해 동일한 문서를 표현, 저장, 조작할 수 있게 되는 것 → DOM은 문서로 만들어져있는 웹 사이트를 브라우저가 이해할 수 있는 구조를 제공 렌더링(Rendering) ✔️ Render는 애플리케이션에서 요소의 속성(props)이 새로운 속성으로 바뀌거나 컴포넌트의 상태가 변경될 때 사용자 화면의 해당 정보만을 갱신하는 것을 의미 ✔️ 렌더링 방법 덕분에 웹 페이지를 전부 다 다시 로드하지 않아도..