풀스택 15일차

React Router

 React 애플리케이션에서 라우팅을 관리하는 라이브러리이다. 이 라이브러리를 통해 사용자는 페이지를 새로고침하지 않고도 애플리케이션 내에서 다양한 화면을 탐색할 수 있다. 이런 특성을 가진 애플리케이션을 SPA(Single Page Application)라고 부르, SPA에서는 페이지 전체를 새로 로드하지 않고, 필요한 부분만 동적으로 업데이트를 한다.

 

React에서 페이지 간 이동을 처리할 때, HTML의 a 태그 대신 Link 컴포넌트를 사용하는 것이 중요하다. 이는 SPA의 특성을 유지하기 위함인데 만약 a 태그를 사용하여 다른 페이지로 이동하면 브라우저는 페이지 전체를 새로고침하게 된다. 이렇게 되면 SPA의 장점을 잃게 되고, 애플리케이션의 성능과 사용자 경험이 저하될 수 있다. 반면에, Link 컴포넌트를 사용하면 페이지 새로고침 없이 경로가 변경되고, 해당 경로에 맞는 컴포넌트가 렌더링된다.

 

예를 들어, 아래 코드에서 'Link'컴포넌트를 사용하면

<Link to="/album">Album</Link>

사용자가 "Album" 링크를 클릭할 때 브라우저가 새로고침되지 않고, 경로만 /album으로 변경되며 해당 컴포넌트가 렌더링된다

 

Route는 React Router에서 경로를 정의하는 컴포넌트인데. 여러 페이지를 관리할 때 Route 태그 안에 다른 Route 태그를 중첩해서 사용할 수 있다. 이렇게 하면, 특정 경로 아래에 또 다른 서브 경로들을 정의할 수 있다

예를 들어

<Routes>
  <Route path="/" element={<Layout />}>
    <Route path="home" element={<Home />} />
    <Route path="album" element={<Album />} />
  </Route>
</Routes>

여기서 "/" 경로에 해당하는 Layout 컴포넌트가 렌더링되며, 그 안에서 "/home"과 "/album" 경로에 해당하는 컴포넌트들이 동적으로 렌더링된다.

 

CSS와 관련된 내용을 살펴보겠습니다. SASS는 CSS를 더 효율적으로 작성할 수 있게 도와주는 CSS 전처리기이다. 이 전처리기는 변수를 사용해 색상이나 폰트 등을 관리할 수 있고, 중첩(Nesting)을 통해 스타일을 구조화할 수 있다

이 기능들은 CSS 코드의 유지보수성을 크게 향상시킨다

 

React에서 CSS를 적용

하는 방법에는 몇 가지가 있는데, HTML의 <link> 태그를 사용해 외부 스타일 시트를 불러올 수 있으며, React 컴포넌트에서 import 구문을 사용해 CSS 파일을 직접 불러올 수도 있다.

HTML에서 CSS적용:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

React에서 CSS적용:

import "./w3.css";