SG의 개발 공부로그

useStats useStats는 기능적 구성 요소에 상태를 추가할 수 있는 React의 훅입니다. 상태는 구성 요소 내에서 변경될 수 있는 데이터를 저장하는 방법이며, React에서 동적 및 반응형 사용자 인터페이스를 구축하는데 중요한 측면입니다. hook 이전에는 상태관리가 클래스 구성요소로 제한되었습니다. hook의 도입으로 기능적 구성 요소에 대한 상태 관리도 가능해지면서 더욱 다양하고 강력해졌습니다. 다음은 useState 훅을 사용하는 방법의 예를 보겠습니다. import React, { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( You clicked {count} ti..

그냥 vite를 쓰는 이유 를 먼저 요약을 하자면 1. 번들링을 생략하기 때문에 서버를 빠르게 구동시킨다. 2. HTTP 상태 코드를 활용하여 리로딩이 더 빠르다. 3. Vite가 설정한 최소한의 config로도 사용이 가능하다. 4. 닥치고 속도차이가 확연히 느껴진다. CRA를 사용해서 React 프로젝트를 많이 생성해 봤을 거다. React 공식에서도 추천해 주는 보일러 플레이트이기도 하고 많은 유용한 기능들을 제공해 주기 때문이다. 하지만, CRA를 쓰다가 Vite를 사용해 보면 속도에 있어서 엄청난 차이를 느껴 볼 수 있다. Vite가 빠른 이유 왜 그럴까? 전의 웹개발방법은 HTML , CSS , JS 이렇게 각각 만들어서 코드를 짜고 서버에 올리면 끝이었다. 그런데 사람들이 자바스크립트 라이브..

React를 중점으로 둘 거지만 React 대안으로는 무엇이 있는지 알아볼 거다 React는 React는 간결하고 집중된, 컴포넌트 기반 UI라이브러리이다. 컴포넌트에 중점을 두고 있기 때문에 그 외에 내장된 기능은 많지가 않다. Routing이라는 기능을 쓰고 싶으면 외부패키지를 가져와야 한다. 리엑트자체는 화면에 어떤 요소를 보여주고 업데이트하는데 중점을 두고 있다. 사용자 지정 HTML elemnet를 만들 수 있게 해 준다. 이런 컴포넌트들 중점이 리엑트의 관심사이다. Angular는 더 다양한 내장 기능을 가진 리엑트의 대체로 Angular (앵귤러)가 있다. Angular 역시 인기 있는 프런트엔드 프레임워크이다. 리엑트처럼 컴포넌트 중점 기반 UI 프레임워크이다. 하지만 리엑트보다 더 내장된..

React는 무엇인가? 리엑트는 자바스크립트 라이브러리이다. 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리 정의는 간단하다. 사용자 인터페이스 구축을 도와주는 자바스크립트 프로그랭밍 언어의 라이브러리이다. 정확히 말하면, 클라이언트 측 라이브러리. 즉, 방문자의 브라우저에서 실행되는 자바스크립트코드이다. 웹페이지에서 로딩이 된 후에 화면을 변경하려면 브라우저상에 자바스크립트를 사용해야 하기 때문에 다채롭고 상호작용이 뛰어난 사용자 인터페이스를 구현할 수 있다. 동작들이 아주 매끄럽고 빠르게 진행되는 것처럼 느껴진다. 새 HTML페이지를 요청하지 않았고, 서버로부터 생성되기를 기다릴 필요도 없다. 자바스크립트가 내부적으로 작업을 수행하면서 화면을 업데이트하기 때문에 가능한 일이다. 그래서 UI 도 ..