TIL - 20250831

0831 React : Side Effects, Refs, and Routing

---

✅ 1. Side Effects와 Cleanup (useEffect)

• Side Effect (부수 효과): 컴포넌트의 주된 역할인 UI 렌더링 외의 모든 작업 (e.g., HTTP 요청, 타이머 설정, DOM 직접 조작).

• useEffect Hook: 함수형 컴포넌트에서 Side Effects를 처리하기 위해 사용하며, 컴포넌트가 렌더링된 후에 실행됩니다.

• Cleanup 함수: useEffect가 반환하는 함수. 컴포넌트가 사라지거나, useEffect가 다시 실행되기 직전에 호출되어 이전에 설정한 Side Effect(타이머, 구독 등)를 정리합니다. 메모리 누수 방지를 위해 필수적입니다.

  useEffect(() => {
    const timer = setTimeout(() => { ... }, 1000);
    // Cleanup 함수
    return () => {
      clearTimeout(timer);
    };
  }, [dependency]);

---

✅ 2. Refs와 Portals: DOM 직접 제어

• useRef Hook:

  1. DOM 요소 직접 접근: ref 속성을 통해 특정 JSX 엘리먼트를 직접 참조하여 값을 읽거나 포커스를 맞추는 등의 작업을 할 수 있습니다.
  2. 리렌더링 없는 값 저장: .current 프로퍼티의 값이 변경되어도 리렌더링이 발생하지 않아, 컴포넌트의 생명주기 동안 값을 유지하는 용도로 사용됩니다.

• forwardRef & useImperativeHandle: 부모 컴포넌트가 자식 컴포넌트의 함수를 ref를 통해 명령적으로(Imperatively) 호출해야 할 때 사용합니다. (e.g., 부모 버튼 클릭 시 자식 모달 열기)

• Portal (ReactDOM.createPortal): 모달, 툴팁 등 부모 컴포넌트의 CSS 스타일에 구애받지 않고 UI를 렌더링해야 할 때, 컴포넌트의 렌더링 결과를 물리적으로 다른 DOM 위치(index.html의 다른 div 등)에 삽입하는 기능입니다.

---

✅ 3. React Router: SPA의 페이지 구조화

• 싱글 페이지 애플리케이션(SPA)에서 URL에 따라 다른 컴포넌트를 보여주며 페이지 이동을 구현하는 라이브러리입니다.

➕ 라우팅 설정 및 페이지 이동

• createBrowserRouter: 라우트 경로와 렌더링할 컴포넌트를 객체 배열로 정의합니다.
• <RouterProvider>: 생성된 라우터를 앱 전체에 제공합니다.
• <Link to="/path">: 페이지를 새로고침하지 않고 지정된 경로로 이동합니다. (<a> 태그 대신 사용)
• <NavLink to="/path">: Link의 확장 버전으로, 현재 경로와 일치할 때 active 클래스 등을 적용하여 활성화된 메뉴를 쉽게 스타일링할 수 있습니다.

➕ 레이아웃과 중첩 라우팅

• 여러 페이지에서 공통적으로 사용되는 UI(헤더, 푸터 등)를 레이아웃 라우트로 만들고, 자식 라우트가 렌더링될 위치에 <Outlet /> 컴포넌트를 배치하여 코드 중복을 줄입니다.

  const router = createBrowserRouter([
    {
      path: '/',
      element: <RootLayout />, // 부모 레이아웃
      children: [ // Outlet에 렌더링될 자식들
        { path: '/', element: <HomePage /> },
        { path: '/products', element: <ProductsPage /> },
      ],
    },
  ]);

➕ 동적 라우팅과 에러 처리

• URL 파라미터 (useParams): 상품 상세 페이지처럼 동적인 ID 값을 경로에 포함할 때 사용합니다. (path: '/products/:productId')
• 쿼리 스트링 (useSearchParams): 필터, 정렬 등 선택적인 옵션을 URL에 표현할 때 사용합니다. (/products?sort=asc)
• 에러 페이지: 라우트 설정에 errorElement를 추가하고, 에러 페이지 컴포넌트에서 useRouteError Hook을 사용하여 사용자 친화적인 에러 화면을 제공할 수 있습니다.