🍾 React : Router, Navigate, build?

 

Router

🧑‍💻 react router dom

✍️ 페이지 전환에 이용하는 라이브러리이다. (내가 원하는 경로로 보낸다!)

 

✍️ 예제 (v6 기준)

<BrowserRouter>
	<Routes>
            <Route index element={<MainPage />} />
            <Route path="places" element={<PlacePage />} />
            <Route path="post/:postId" element={<PostPage />} />
    </Routes>
</BorwserRouter>

✍️ index : index page를 뜻한다. 말그대로 Web app 가장 먼저 나오는 페이지.

✍️ path : path="" 안의 값이 / 다음의 주소가 된다. 값을 넣고 이동했을 때 해당 element가 반환된다.

✍️ :postId : :다음에 오는 값의 경우, 동적으로 변하는 파라미터를 뜻한다. useParams Hook을 사용한다.

 

 

Navigate

🧑‍💻 react router dom 에서 제공하는 Hook인 useNavigate()

✍️ 페이지 이동하는 데에 사용한다. 

 

✍️ 예제

function SampleNavi(props) {
	const navigate = useNavigate();
    const movieTomain = () => {
    	navigate("/");
    }
	return ( ... );
}

✍️ navigate 괄호 안에는 이동할 path 를 넣어준다.

 

 

build

🧑‍💻 코드, 애플리케이션이 사용하는 이미지, css파일 등 ... 파일을 모두 모아서 패키징하는 과정을 일컫는다.

✍️ build folder 생성 후 패키징.

npm run build

✍️ build 한 web app 을 실행시키기 위해 serve 패키지를 설치.

npm install -g serve

✍️ build 폴더를 기반으로 하여 web app 를 실행.

serve -s build

 

build의 단짝, 배포는 무엇일까?

🧑‍💻 build를 통해 생성된 정적인 파일들을 배포하려는 서버에 올리는 과정을 일컫는다.

 

 

 

 

 

 

---

<참고>

소플TV님의 React 강의