나디아 성장 일기

📌 useLayoutEffect(): 브라우저가 화면을 그리기 전에 실행되는 useEffect 브라우저가 화면을 다시 그리기 전에 레이아웃 계산 DOM이 변경된 후, 브라우저가 화면에 반영하기 전에 실행된다.👉 레이아웃이나 DOM 관련 조작에 적합👉 애니메이션 라이브러리 사용useLayoutEffect(setup, dependencies?)매개변수setup: Effect의 로직이 포함된 함수clean-up 함수를 반환할 수도 있다.컴포넌트가 DOM에 추가되기 전에 React는 setup 함수를 실행한다.dependencies가 변경되어 다시 렌더링 될 때마다, React는 (cleanup 함수를 제공했다면) 먼저 이전 값으로 cleanup 함수를 실행한 다음, 새로운 값으로 setup 함수를 실행한..

📌 useImmer(): React에서 상태 관리를 쉽게 할 수 있도록 도와주는 Hook React의 useState 훅과 Immer 라이브러리가 제공하는 불변 업데이트 패턴을 결합한 커스텀 React 훅 React 상태 관리를 쉽게 하고, 복잡한 상태 업데이트를 간단하게 할 수 있는 훅 중첩된 객체나 배열 상태를 업데이트할 때 유용 ❓언제 사용하면 좋은가 중첩된 구조의 상태를 자주 업데이트하는 경우 상태 업데이트 시 불변성을 유지해야 하는 경우 코드의 가독성을 높이고 싶을 때 ⏩ 장단점 장점 간단한 상태 관리 : 중첩된 객체와 배열의 상태 업데이트를 간단하게 해준다. 불변성 자동 관리 : immer가 불변성을 자동으로 관리해 주므로, 직접 불변성을 신경 쓸 필요가 없다. - 상태가 의도치 않게 변형되는..

📌 React Router 라이브러리프로덕션용으로 사용 가능한 싱글 페이지 앱을 구현(SPA)하기 위한 React Router 라이브러리 URL이 변경돼도 싱글페이지로 렌더링 하는 기능을 지원React컴포넌트 안에 렌더링 로직 + 사이드 이펙트 로직 = 코드 복잡, 읽기 어려움, 관리 어려움React Router (v6.4+ data API : Remix Framework)컴포넌트는 순수하게 렌더링 로직 관리loader 함수는 사이드 이펙트 (서버 요청, 응답 코드 처리)  ⏩ 설치react-router-dom 패키지 설치pnpm add react-router-dom  ☑️ 라우터 생성 & 공급⏩ 컴포넌트 (라우터 공급) import { StrictMode } from 'react';import { ..

📌 싱글 페이지 애플리케이션 (Single-page application, SPA): 단일 HTML 페이지로 구성된 웹 애플리케이션 처음에 한번 페이지를 로드한 후, 새로운 데이터를 요청하거나 페이지 전환을 하더라도 새로고침 없이 동적으로 필요한 데이터만 불러오는 방식사용자가 페이지 사이를 이동할 때 서버에 전체 페이지를 요청하는 것이 아니라, 기존 페이지를 유지한 채 필요한 데이터만 교체브라우저(클라이언트) 측에서 리액트를 사용해 사용자가 요청에 따른 페이지 컴포넌트를 렌더링하여 전통적인 웹 프로그램을 브라우저 단에서 처리할 수 있다. React에서 SPA를 구현할 때 주로 React Router라는 라이브러리를 사용해 라우팅을 처리 AJAX : 페이지를 변경하지 않고 동일한 페이지에서 오로지 자바스..

📌 데이터 패칭(Data Fetching) : 외부 API나 데이터베이스 등에서 데이터를 가져오는(읽는) 작업 서버에 데이터 요청/응답 (읽기(Read)) 비동기적: 네트워크 요청은 서버에서 데이터를 가져오는 동안 비동기적으로 처리됨주로 GET 요청: 데이터 패칭은 HTTP `GET` 요청을 통해 서버에서 데이터를 조회하는 형태 API 상태 관리: 데이터 패칭 과정에서 `isLoading, data, error` 등 API 상태를 관리해야 함서버의 데이터를 가져오는 작업은 이펙트(Effect)를 사용한다.   ✅ 이펙트(Effect) 사용 API 서버에 데이터를 요청해 응답받은 데이터를 렌더링이펙트를 사용해 Promise 또는 Async / await를 사용해 데이터 가져오기를 요청데이터 가져오기 요청..

📌 useEffect(): 리액트 컴포넌트와 외부 시스템을 동기화할 때 사용렌더링 자체에 의해 발생하는 부수 효과를 특정하는 것특정 이벤트가 아닌 렌더링에 의해 직접 발생한다.(어떤 상호작용과도 상관없이 발생, 커밋 단계 이후 실행 됨)React는 화면을 업데이트한 다음 useEffect 내부의 코드를 실행한다.➡️ useEffect는 화면에 렌더링이 반영될 때까지 코드 실행을 지연 시킨다.외부 시스템(external) : React에서 제어되지 않는 시스템(ex. 네트워크, 브라우저 API, 서드파티 라이브러리와의 연결, 데이터 가져오기, DOM 수정, 타이머 설정, 구독 등)ex) 서버에 접속하는 것➡︎ 순수한 계산이 아니고 부수 효과를 발생시키기 때문에 렌더링 중에는 할 수 없다❌➡︎ 이벤트도 아..

✅ Motion One ⏩ 설치pnpm add motion   ⏩ 기능 (1) animatie(): DOM 요소 또는 집합을 쉽게 애니메이션 한다.import { animate } from 'motion';animate(target, props, options?)매개변수첫 번째 인수: 애니메이션을 적용할 DOM 요소두 번째 인수: CSS 속성 값(객체 or 배열)세 번째 인수: 애니메이션 옵션 객체props에 함수를 설정할 수 있다.animate ( element, { x: 400, rotate: 360 }, { duration: 1.5, delay: 0.5 } );};// 함수animate ( (progress) => { box.textContent = Math.round(pro..

📌 React 애니메이션리액트는 애니메이션을 지원하지 않는다.➡ useRef() + 라이브러리 사용리액트 엘리먼트가 아닌 실제 DOM 엘리먼트에 적용해야 한다.➡  useRef(), refCallback, event handler 등 사용  ✅ Tilt.js ⏩ 설치pnpm install vanilla-tilt   ⏩ 사용 1. 불러오기import VanillaTilt from 'vanilla-tilt';  2. 애니메이션 옵션 설정const VANILLA_TILT_OPTIONS = { // 기울이는 방향을 반대로 변경 reverse: false, // 최대 기울기 회전(도°) max: 15, // X축의 시작 기울기(도°) startX: 0, // Y축의 시작 기울기(도°) startY..

📌 useRef : 컴포넌트의 정보를 기억하되, 해당 정보가 렌더링을 유발하지 않도록 하는 Hook현재(current) 기억된 값이 변경되더라도 기억하지만, 리-렌더링을 요청하지 않음-  state와 달리 ref의 current 값을 설정하면 리렌더가 트리거되지 않는다❌어떤 데이터를 기억하고 싶은데 리렌더링은 안 하고 싶을 때 사용 - 화면 업데이트 ❌ 👉 리렌더링을 해야 바뀜리액트의 것(리액트 훅)이 아닌 것이 아닌 것을 기억해야 할 때 사용 DOM 엘리먼트 저장 및 조작, JSX를 계산하는 데 필요하지 않은 다른 객체 저장 등에 사용 자바스크립트 순수 객체 반환{ current: null } → DOM Mount → { current: HTMLElement } useState 👉 기억된 값을 재..

📌 CSS module 사용하기 ✅ 외부 CSS 파일 참조여러 컴포넌트에서 사용된 CSS 클래스명이 서로 중복될 가능성이 높아진다.서로 다른 두 개의 CSS 파일에 동일한 이름의 CSS 클래스가 정의되어 있다면, 해당 클래스가 적용된 React 엘리먼트는 이 두 스타일이 한꺼번에 적용된다.   ✅ CSS ModuleCSS 클래스명을 고유한 이름으로 자동 변환해서 CSS 클래스명이 서로 겹치는 현상을 방지해준다.CSS Module을 사용하면 CSS 파일마다 고유한 네임스페이스를 자동으로 부여해 주기 때문에 각각의 React 컴포넌트는 완전히 분리된 스타일을 보장받는다.  ⏩ CSS Module 사용 1. CSS 파일명[모듈명].module.css  2. CSS Module 사용{styles.[클래스명]}..