프론트엔드/React3 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. 이전 1 다음