React Compiler를 직접 사용해보기 🎶 (with. next 15)

복잡한 React 컴포넌트를 작성할 때, 은근 골치아픈게 memo, useMemo, useCallback과 같은 최적화이다. 물론, 최적화에 신경쓰지 않는다면 안써도 되는 경우도 많지만.useEffect 내부에서 상태를 변화시키는 함수를 호출시키는 경우에 이 함수는 useCallback으로 감싸져야 하며, 때때로 조건부 렌더링 컴포넌트는 memo로 최적화 시켜야 무한 렌더링을 방지할 수 있는 등등 여러 경우에 이런 최적화 코드는 필수가 될 때가 있다. (lint가 함수를 새빨갛게 표시하는 순간, useCallback을 써야하는 상황이라는 걸 바로 알 수 있다.... 💧) 때문에!React 19 버전의 발표를 유심히 본 사람들이라면, React Compiler의 존재를 보고 매우 기뻤을지도 모른다.(그리..

• format_list_bulleted React
• · 2024. 12. 10.
• textsms

자바스크립트 Proxy 객체를 사용해서 State 만들어 보자

React를 사용하면 useState를 통해서 데이터를 바꿔서 DOM을 다시 그리는 기능을 사용할 수 있다. 생각해보면, 순수 자바스크립트로 화면을 바꾸고자 한다면 DOM에서 element를 찾은 뒤에 데이터를 직접 수정해줘야 하는 부분이다. 그래서 어떻게 React는 이런 반응성, Reactivity를 구현했을까 고민해보고 자바스립트의 Proxy 객체를 사용해서 State를 비슷하게 구현해보자 하였다. 🙌 직접 구현한 예제 최대한 React와 비슷하게 구현해보려고 노력했다. 다음은 구현한 코드 내용인데, 일단 HTML이다.  root에 element가 삽입되는 것으로 생각했고, 하나의 js를 통해서 이를 통제할 수 있도록 구현해봤다. Proxy를 사용해서 구현했는데, Proxy..

• format_list_bulleted JavaScript
• · 2024. 8. 25.
• textsms

선언적 프로그래밍이란?

선언적 프로그래밍은 코드를 작성할 때 "무엇(What)"을 달성하고자 하는지에 초점을 둔다. 어떻게(How) 달성할지에 대한 구체적인 단계를 명시하지 않고, 원하는 결과를 명확하게 묘사하는 방식으로 코드를 작성한다. 선언형으로 작성된 코드는 추상화로 문제를 해결하기에, 재사용성이 높고 사용할때 간결하여 가독성이 높다. 각각의 기능을 따로 구현하게 되기 때문에 각 기능의 모듈간 종속성이 낮아져 독립적으로 관리 및 사용이 가능하다. 위와 같은 이유들로, 선언적 프로그래밍은 유지보수가 적합한 코드들을 작성할 수 있게 해준다. React는 선언형 UI 라이브러리로, 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 준다고 한다. 자바스크립트를 이용해 선언적으로 작성한 배열의 모든 값 더하는 코드 cons..

• format_list_bulleted 기타
• · 2023. 8. 30.
• textsms

Next.js App Router 간단하게 사용하기

Next 13.4 버전이 릴리즈되면서 App Router가 stable이 되었다. 그에 따라서, 간단하게 App Router를 사용해보도록 하였다. npx create-next-app@latest 위의 명령어로 프로젝트를 생성하면 프로젝트 이름, 타입스크립트와 ESLint 사용 여부, tailwind CSS의 사용여부, src 디렉토리 사용여부를 물은 뒤 다음과 같이 질문이 나온다. 🧅 Use App Router (recommended)? › No / Yes 여기서 Yes를 선택하여 App Router를 사용할 수 있다. 🍎 next.config.js의 설정에 experimental.appDir 이 true가 된다. App 라우터를 사용하면, pages 폴더 대신 app 폴더가 생긴다. app 폴더 내부..

• format_list_bulleted React
• · 2023. 6. 12.
• textsms

useEffect의 life cycle

useEffect는 언제 실행되고 언제 실행이 멈출까. useEffect의 life cycle에 대해서 알아보았다. 모든 React 컴포넌트는 다음과 같은 생명주기를 가진다. 컴포넌트는 화면에 추가될 때 mount된다. 컴포넌트는 새로운 props나 state를 받았을 때 업데이트된다. 컴포넌트는 화면에서 제거되었을 때 unmount된다. useEffect는 컴포넌트 내부에 존재하기에 위와 같은 생명주기를 따라간다고 생각할 수 있으나, 완전 별개의 생명주기를 가진다고 봐야 한다. useEffect(() => { // 동기화 시작 return () => { // 동기화 해제 } }) useEffect는 기본적으로는 동기화를 위해서 사용되는 hook이다. 예를 들면, 실제 데이터와 화면 사이에 불일치가 발생..

• format_list_bulleted React
• · 2023. 5. 21.
• textsms

React18의 <Suspense>에 대해서

Suspense는 리액트에서 기본적으로 제공하는 컴포넌트로, 자식 컴포넌트가 로딩이 될 때 까지 fallback을 보여줄 수 있다. 즉, 기존에 사용하던 isLoading 상태를 이용한 패턴을 더 간단하게 사용할 수 있게 해주는 컴포넌트이다. Suspense 내부에 들어가는 Content 컴포넌트이다. import { useEffect, useState } from "react"; let tmp = ""; const getData = () => { return new Promise((resolve, reject) => { setTimeout(() => { tmp = "Hello Mr.Park"; resolve(true); }, 3000); }); }; const Content = () => { const..

• format_list_bulleted React
• · 2023. 5. 11.
• textsms