⚛️ React 핵심 정리

---

🧱 DOM vs React DOM

구분	DOM (Document Object Model)	React DOM (Virtual DOM)
정의	HTML 문서의 구조를 표현하는 객체	가상으로 HTML 구조를 관리 및 렌더링
Element	HTML 마크업 (div, input, p 등)	React 컴포넌트
Attribute	HTML 속성 (style, id, class, src 등)	props (속성 값 전달자)
특징	실시간으로 DOM 변화 시 전체 렌더링 발생	Virtual DOM 비교 후 실제 DOM만 업데이트

---

🔁 컴포넌트 생명주기 (Lifecycle)

컴포넌트는 생성 → 갱신 → 소멸 의 주기를 가집니다.

단계	시점	설명	관련 Hook
mount	출생	컴포넌트가 처음 렌더링될 때 실행	useEffect(() => {}, []) (한 번 실행)
update	인생	컴포넌트가 리렌더링될 때 실행	useEffect(() => {}, [의존성])
unmount	사망	컴포넌트가 DOM에서 제거될 때 자동 실행	자동 처리

의존성 배열에 특정 변수를 지정하면, 해당 변수가 변경될 때만 useEffect가 실행됩니다.

---

📦 props (프로퍼티)

부모 컴포넌트 → 자식 컴포넌트 로 데이터를 전달하는 매개변수입니다.

특징	설명
읽기 전용	자식에서 전달받은 props는 직접 수정 불가
단방향 데이터 흐름	부모 → 자식만 전달 가능
재사용성 향상	컴포넌트를 유연하게 구성 가능

🛠️ 사용 예시

부모 컴포넌트에서 전달

function Parent() {
  return <Child name="홍길동" age={20} />;
}

(방법 1) props 객체 사용

function Child(props) {
  return <p>{props.name}, {props.age}</p>;
}

(방법 2) 구조 분해 할당

function Child({ name, age }) {
  return <p>{name}, {age}</p>;
}

---

🔍 useRef

렌더링 없이 값 또는 DOM을 참조할 수 있는 Hook.

특징	설명
렌더링 없음	값이 변경되어도 화면은 다시 렌더링되지 않음
내부 참조용	입력 값을 내부적으로만 사용할 때 유용
DOM 참조	특정 DOM 요소 직접 조작 가능

const inputRef = useRef(null);
console.log(inputRef.current); // <input> 엘리먼트 참조
console.log(inputRef.current.value); // 입력된 값 참조

비교: 단순 입력값 관리 시 useRef, 화면 반영 필요 시 useState

---

🔗 useSearchParams

React에서 쿼리스트링(query string) 을 추출하는 Hook.

const [searchParams] = useSearchParams();
const name = searchParams.get('name');
const age = searchParams.get('age');

---

🧭 useParams

path 매개변수를 추출하는 Hook.

<Route path='/product/:name/:price' element={<Product/>} />

const { name, price } = useParams();

예: /product/코카콜라/1000 → { name: '코카콜라', price: '1000' }

---

🚀 useNavigate

React에서 페이지 이동을 제어하는 Hook.

const navigate = useNavigate();
navigate('/home');

---

🧭 Router 기본 구조

React Router를 사용해 가상 URL 기반의 화면 전환을 구현합니다.

<BrowserRouter>
  <Link to='/'>홈으로</Link> {/* a 태그 대체 */}
  <Routes>
    <Route path='/' element={<Home/>} />
    <Route path='/about' element={<About/>} />
    <Route path='*' element={<NotFound/>} /> {/* 예외 페이지 */}
  </Routes>
</BrowserRouter>

태그/Hook	역할	설명
<BrowserRouter>	라우터 루트 컴포넌트	모든 Route를 관리하는 상위 라우터
<Link>	a 태그 대체	페이지 새로고침 없이 이동
<Routes>	라우팅 묶음	여러 Route 관리
<Route>	경로와 컴포넌트 매핑	path와 element로 구성
useNavigate()	JS 내 이동 제어	코드 내에서 페이지 이동 제어