본문 바로가기

전체 글148

객체의 불변성 객체의 불변성React에서 useState로 객체를 다룰 때 불변성(Immutability) 개념을 잘 이해하고 있어야, 예상대로 리렌더링이 잘 되고 버그도 예방할 수 있다.불변성이란, 원래 객체를 직접 수정하지 않고, 복사해서 수정된 새 객체를 만드는 방식을 말한다.React에서는 상태가 변경될 때 컴포넌트가 리렌더링되는데, 기존 객체를 직접 수정하면 변경을 감지하지 못해 리렌더링이 일어나지 않을 수 있다. 나쁜 예시 (불변성 깨짐)const [user, setUser] = useState({ name: 'Alice', age: 25 });// ❌ 직접 객체 수정user.age = 26;setUser(user);이 경우 user 객체의 참조는 바뀌지 않았기 때문에, React는 "아무것도 안 바뀌었네".. 2025. 4. 12.
useParams vs useNavigate useParams vs useNavigateuseParams와 useNavigate는 React Router에서 제공하는 Hook들이다.이 둘은 라우팅 관련 기능을 사용할 때 아주 자주 사용한다.useParams – URL의 파라미터를 가져오는 Hook라우트(URL 경로) 안에 동적 파라미터가 있을 때, 그 값을 컴포넌트에서 꺼내서 사용하고 싶을 때 사용한다.// App.jsimport { BrowserRouter, Routes, Route } from 'react-router-dom';import UserPage from './UserPage';function App() { return ( } /> );} // UserPage.jsimport { us.. 2025. 4. 6.
useState vs useEffect useState vs useEffect useState와 useEffect는 React의 함수형 컴포넌트에서 가장 자주 사용하는 Hook 중 하나다.useStateuseState는 컴포넌트의 상태(state)를 저장하고 관리할 수 있도록 해주는 Hook이다. const [state, setState] = useState(initialValue); state: 현재 상태 값setState: 상태를 업데이트하는 함수initialValue: 초기 상태 값 import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( 현재 카운트: {count} se.. 2025. 4. 6.
React 스타일링 방식 비교 (CSS Modules, styled-components, 일반 CSS) React 스타일링 방식 비교 (CSS Modules, styled-components, 일반 CSS) 방식모듈화클래스 충돌 방지동적 스타일가독성/유지보수CSS Modules✅✅❌✅styled-components✅✅✅✅일반 CSS❌❌❌❌ (규모 커지면) 1. CSS Modules파일 확장자: MyComponent.module.css클래스 이름 자동 고유화 → 충돌 걱정 없음정적인 스타일에 아주 좋고, 유지보수도 용이함📁 디렉토리 구조src/├── components/│ └── Button/│ ├── Button.jsx│ └── Button.module.css└── App.jsxButton.module.css.button { background-color: #4caf50; c.. 2025. 4. 5.
Vite 기본 폴더 구조 Vite 기본 폴더 구조 npm create vite@latest 명령어로 Vite 프로젝트를 생성하면 기본적으로 다음과 같은 폴더 구조가 생성됩니다.my-vite-project/├── node_modules/├── public/│ ├── favicon.ico├── src/│ ├── assets/│ │ ├── logo.svg│ ├── App.jsx (또는 App.tsx, App.vue 등)│ ├── main.jsx (또는 main.tsx, main.js 등)├── .gitignore├── index.html├── package.json├── package-lock.json (또는 yarn.lock, pnpm-lock.yaml)├── README.md├── vite.config.js .. 2025. 3. 29.
Vite vs 프레임워크 Vite vs 프레임워크 Vite와 프레임워크의 차이점은 그 목적과 역할에서 크게 다릅니다. 두 가지를 비교하면서 설명하겠습니다.1. Vite (빌드 도구 및 개발 서버)목적: Vite는 개발 도구로, 애플리케이션을 개발하고 빌드하는 과정을 돕습니다. Vite는 빠른 빌드와 **빠른 모듈 핫 리플레이스먼트(HMR)**를 제공하며, 애플리케이션의 개발 속도를 크게 향상시키는 데 초점을 맞춥니다. 웹팩을 사용할 때보다 훨씬 더 빠르게 개발하고 배포 개발 서버: Vite는 개발 중에 코드가 변경될 때마다 자동으로 결과를 브라우저에 반영할 수 있도록 도와주는 개발 서버를 제공합니다.빌드 최적화: Vite는 Rollup을 기반으로 프로덕션 빌드를 생성하여 최적화된 번들을 만들고, 애플리케이션을 효율적으로 배포할 .. 2025. 3. 29.

티스토리툴바