App 컴포넌트

import React, { Component } from 'react';
import Home from './pages/Home';
import Music from './pages/Music';
import Contact from './pages/Contact';
import {Route, Routes} from 'react-router-dom';
import './App.css';

class App extends Component {

  render() {
    return (
          <Routes>
            <Route path='/' element={<Home />}></Route>
            <Route path='/music' element={<Music />}></Route>
            <Route path='/contact' element={<Contact />}></Route>
          </Routes>
    );
  }
}

export default App;

기본적으로 서버에 네트워크 요청을 보내 특정 페이지를 출력 받아오는 것이 아닌, SPA(Single Page Application) 구현을 이번 토이 프로젝트의 목표로 하였으니 이 기능을 실현시키기 위한 방법으로 컴포넌트 스위치가 가능한 리액트 라우터를 활용했다.

<Routes>부모 태그 안의 <Route> 자식 구조를 활용하여 path에 매칭되는 대표 컴포넌트만 출력되게 만들었다. v6 버전에서는 default로 exact가 적용되어 있어 정확한 path와 일치하는 컴포넌트만이 app 컴포넌트 위로 출력되게 된다.

CSS

#root{
    width: inherit;
    height: inherit;
}

DOM의 root element를 body 태그의 width, height 속성과 같게 만들었다. 그 이유는 html,body,root element들을 전체 viewport 크기로 손쉽게 설정하기 위해서이다. (굳이 2번 따로 설정해 줄 필요없이 body태그에서 viewport 크기를 follow up 하게 설정해주면 root도 자동 적용되기 때문이다.)