리액트 라우팅 개념 잡기

라우팅이란?

사용자가 요청한 URL에 맞는 페이지를 보여주는 것

리액트는 SPA(Single Page Application) 방식으로 렌더링!

새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다.

react-router-dom은 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리!

Lifecylce Method 복습(useEffect)

언제(When)의 문제를 (코드 상의) 위치(Where)로 가져와 해결할 수 있다.

useEffect(() => {
	// 컴포넌트가 화면에 가장 처음 렌더링됐을 때에만 실행하고 싶을 때
},[]);

useEffect(() => {
	// 특정 값이 업데이트될 때마다 실행하고 싶을 때
},[email, password]); // 옆의 배열을 useEffect의 dependency array라고 부름

useEffect(() => {
	return () => {
		// 컴포넌트가 사라지기 직전에 특정 코드를 실행하고 싶을 때
	};
},[]);

react-router-dom을 활용한 페이지 이동 실습

설치하기

(주의) react-router-dom v5 버전이 아닌 v6를 사용합니다!!

npm i react-router-dom

주요 요소 설명

• 라우팅에 포함시킬 페이지들은 모두 <BrowserRouter> 컴포넌트로 감싸줘야 한다.
• <Routes> 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 Route 단 하나만을 렌더링 시켜주는 역할을 한다.