useEffect와 리액트 라우팅 개념 정리

1. useEffect란?

• 컴포넌트의 생애주기와 관련된 훅으로, 특정 시점에서 실행해야 하는 비동기 코드나 부수효과(Side Effects)를 처리할 때 사용한다.
• 리액트의 UI는 데이터가 변경될 때만 업데이트되므로, 데이터를 기반으로 동작을 수행하는 경우 유용하다.

1.1. useEffect의 기본 개념

• 리액트의 가상 DOM(Virtual DOM, VDOM)에서 변화가 발생하면 실제 DOM에 반영되는 과정이 반복된다.
• 컴포넌트의 라이프사이클(생성 → 사용 → 소멸)에 따라 적절한 처리를 해야 한다.
• useEffect를 활용하면 특정 시점에서 실행할 비동기 코드를 등록할 수 있다.

1.2. useEffect의 사용법

• 무조건 두 개의 인자를 받는다.
  1. 실행할 함수(셋업 코드)
  2. 의존성 배열(어떤 값이 변경될 때 실행할 것인지 결정)
• 의존성 배열을 어떻게 설정하는가에 따라 실행 시점이 달라진다.
  • 빈 배열([])을 전달하면 컴포넌트가 마운트될 때 한 번 실행된다.
  • 특정 상태나 변수를 배열에 넣으면 해당 값이 변경될 때마다 실행된다.
  • 의존성 배열을 생략하면 컴포넌트가 리렌더링될 때마다 실행된다.

1.3. useEffect 실행 시 두 번 실행되는 이유

• 개발 모드에서 StrictMode가 활성화되어 있으면 useEffect가 두 번 실행된다.
• 이는 개발 중 발생할 수 있는 문제를 미리 감지하기 위한 목적이며, 실제 배포 시에는 한 번만 실행된다.
• 개발 중 useEffect의 라이프사이클을 정확하게 확인하고 싶다면 StrictMode를 해제할 수 있다.

1.4. 여러 개의 useEffect 사용

• 여러 개의 상태를 감지해야 할 경우, 하나의 useEffect에서 관리하는 것보다 useEffect를 여러 개로 나누는 것이 코드의 가독성을 높이는 방법이다.

1.5. clean-up

• useEffect 내부에서 함수를 반환하면, 해당 컴포넌트가 언마운트(제거)될 때 실행된다.
• 주로 이벤트 리스너 제거, 타이머 해제, 구독 취소 등의 클린업 작업을 수행한다.

1.6. 부수효과(Side Effects)

• 함수형 컴포넌트 내부에서 직접 부수효과를 실행하면 예측할 수 없는 동작이 발생할 수 있다.
• 따라서 부수효과가 필요한 작업(예: API 호출, 외부 상태 변경 등)은 useEffect 내부에서 수행하는 것이 원칙이다.

---

2. 리액트 라우팅

• 라우팅(Routing)이란?
  • 사용자의 요청에 따라 화면을 전환하는 작업을 의미한다.
  • 리액트에서는 보통 react-router 라이브러리를 활용하여 구현한다.

2.1. 라우팅의 개념

• 라우팅은 단순한 화면 전환 이상의 의미를 가질 수 있다.
• SPA(Single Page Application)에서는 페이지를 새로고침하지 않고 클라이언트 측에서 URL을 변경하며 화면을 전환한다.

2.2. react-router 라이브러리의 버전별 차이

구분4~5버전 (구버전)6~7버전 (현행버전)

사용 가능 컴포넌트	클래스 컴포넌트 & 함수형 컴포넌트	함수형 컴포넌트만 지원
라우팅 설정 방식	<Switch>로 감싸서 <Route> 사용	<Routes>로 감싸서 <Route> 사용
컴포넌트 지정 방식	<Route component={Component} />	<Route element={<Component />} />
중첩 라우트	상대경로를 사용하여 중첩 가능	상대경로 사용 가능하며, 더욱 직관적인 구조
URL 파라미터 접근	match.params 사용	useParams() 훅 사용
네비게이션(페이지 이동)	history.push() 사용	useNavigate() 훅 사용
리다이렉트 처리	<Redirect to="/path" />	<Navigate to="/path" />
쿼리스트링 읽기	location.search 사용	useSearchParams() 훅 사용
지연 로딩 (Lazy Loading)	React.lazy와 Suspense 지원	동일하지만 더 직관적인 코드 구조
오류 처리	별도 라이브러리나 try-catch 필요	라우트 레벨에서 오류 처리가능

(1) 4~5버전

• react-router의 초기 구조로, 기본적으로 클래스 컴포넌트에서 사용 가능하다.
• BrowserRouter와 Switch, Route 컴포넌트로 구성된다.
• Route 요소 안에서 component 속성으로 컴포넌트를 지정한다.

(2) 6~7버전

• 최신 버전에서는 함수형 컴포넌트에서만 사용 가능하도록 변경되었다.
• Switch가 제거되고 Routes가 도입되었다.
• Route에서 component 속성 대신 element 속성을 사용하여 JSX 형태로 컴포넌트를 전달한다.
• useParams, useNavigate 등의 훅을 활용하여 더 직관적인 코드 작성이 가능하다.

2.3. 라이브러리 방식과 프레임워크 방식의 차이

• 기존 리액트 라우터는 라이브러리 방식으로 동작하며, 필요한 기능을 추가하는 방식이었다.
• 최근에는 리액트 라우터를 기반으로 하는 프레임워크 방식도 등장하여 코드 구조가 다르게 변했다.
• 현재 개발 중인 프로젝트의 특성에 맞게 적절한 방식과 버전을 선택해야 한다.

2.4. 레이아웃을 활용한 라우팅

• 특정 요소(예: 헤더, 사이드바 등)는 페이지가 변경되어도 유지되어야 하는 경우가 있다.
• 이때 레이아웃 컴포넌트를 활용하면 효율적인 라우팅이 가능하다.
• 부모 컴포넌트가 경로 없이 자식 컴포넌트들을 감싸도록 설계하여 유지해야 할 요소를 관리한다.

2.5. 링크 이동과 페이지 리로드 방지

• 일반적인 <a> 태그를 사용하면 전체 페이지가 새로고침된다.
• 이를 방지하기 위해 Link 컴포넌트를 사용하여 클라이언트 측에서만 URL을 변경하도록 처리한다.

2.6. URL 파라미터와 상태 관리(6,7)

• useParams 훅을 사용하여 URL에서 동적 값을 추출할 수 있다.
• 예를 들어, /product/:id와 같은 경로에서 id 값을 동적으로 가져올 수 있다.
• useNavigate를 활용하여 코드에서 프로그램적으로 페이지 이동을 제어할 수도 있다.

2.7. 리액트 라우터의 추가 기능

• 지연 로딩(Lazy Loading): React.lazy와 Suspense를 사용하여 필요한 시점에만 컴포넌트를 로드할 수 있다.
• 오류 처리(Error Handling): 특정 경로에서 발생할 수 있는 오류를 처리하는 기능도 제공된다.
• 최신 리액트 라우터는 화면 전환 과정에서 발생할 수 있는 다양한 예외 상황을 처리하는 기능을 포함하고 있다.

---

3. 마무리

• useEffect는 리액트 컴포넌트의 라이프사이클을 활용하여 비동기 작업을 수행하는 훅으로, 올바르게 사용하지 않으면 예측하지 못한 문제가 발생할 수 있다.
• 리액트 라우팅은 SPA에서 화면 전환을 구현하는 중요한 기술이며, react-router의 버전에 따라 코드 구조가 다를 수 있으므로 최신 버전의 문서를 참고하여 적절한 방식을 선택해야 한다.
• 실제 프로젝트에서 여러 케이스를 직접 경험해보며 익히는 것이 가장 효과적이다.