준비

여기서는 SPA 라이브러리 중 하나인 리액트 React 를 이용하여 페이지 이동시에 음악을 끊지 않고 재생하는 방법을 설명합니다. 먼저 디렉토리를 하나 생성한 뒤에 리액트 개발 환경을 구축합니다.

npx create-react-app .

예제에 필요한 패키지를 추가합니다.

npm i react-router-dom

실행

npm start

페이지 구축

src 폴더 하위에 아래 폴더와 파일들을 생성합니다.

• Document.js

• pages/Home.jsx

• pages/Author.jsx

• components/Layout.jsx

• components/Menubar.jsx

파일들을 열어 아래와 같이 작성합니다.

Document.js

import React from 'react';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const Document = () => {
  return (
    <BrowserRouter>
      <App />
    </BrowserRouter>
  );
};

export default Document;

URL 구성을 위해 App.js 를 가져와 BrowserRouter 로 감싸주는 역할을 합니다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Document from './Document';

ReactDOM.render(<Document />, document.getElementById('root'));

reportWebVitals();

작성한 Document.js 를 가져와 렌더링합니다.

components/Menubar.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const Menubar = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to='/'>Home</Link>
        </li>
        <li>
          <Link to='/author'>Author</Link>
        </li>
      </ul>
    </div>
  );
};

export default Menubar;

components/Layout.jsx

import React from 'react';
import Menubar from './Menubar';

const Layout = ({ children }) => {
  return (
    <div>
      <Menubar />
      {children}
    </div>
  );
};

export default Layout;

Home.jsx

import React from 'react';
import Layout from '../components/Layout';

const Home = () => {
  return (
    <Layout>
      <h1>Home</h1>
    </Layout>
  )
};

export default Home;

Author.jsx

import React from 'react';
import Layout from '../components/Layout';

const Author = () => {
  return (
    <Layout>
      <h1>Author</h1>
    </Layout>
  )
};

export default Author;

App.js

import './App.css';
import { Route } from 'react-router-dom'; 
import Home from './pages/Home';
import Author from './pages/Author';

function App() {
  return (
    <div className="App">
      <Route exact path='/' component={Home} />
      <Route exact path='/author' component={Author} />
    </div>
  );
}

export default App;

URL path 와 page 를 지정합니다.

음악 재생

먼저 간단하게 audio 태그를 App.js 에 작성하고 재생해보겠습니다.

function App() {
  return (
    <div className="App">
      <Route exact path='/' component={Home} />
      <Route exact path='/author' component={Author} />
      <audio
        src='https://docs.google.com/uc?export=open&id=14JlzHWUE2TqAsN237ft43SOw02xDPori'
        autoPlay={true}>
      </audio>
    </div>
  );
}

페이지에 접속하면 자동으로 음악이 재생되고 Menubar 를 이용하여 페이지 이동시에 음악이 종료되지 않는 것을 확인할 수 있습니다.

활용

조금 더 유용하게 사용하도록 Context 를 이용할 수 있습니다.

src 폴더 하위에 파일을 생성하고 작성합니다.

store/index.jsx

import React, { useState } from 'react';

export const Context = React.createContext({});

const Container = (props) => {

  const [isPlay, setIsPlay] = useState(false);

  return (
    <Context.Provider value={{ isPlay, setIsPlay }}>
      {props.children}
      {isPlay && (
        <audio
          src='https://docs.google.com/uc?export=open&id=14JlzHWUE2TqAsN237ft43SOw02xDPori'
          autoPlay={true}>
        </audio>
      )}
    </Context.Provider>
  );
};

export default Container;

아래와 같이 파일을 수정합니다.

Document.js

import React from 'react';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import Container from './store/index';

const Document = () => {
  return (
    <BrowserRouter>
      <Container>
        <App />
      </Container>
    </BrowserRouter>
  );
};

export default Document;

components/Menubar.jsx

import React, { useContext, useCallback } from 'react';
import { Link } from 'react-router-dom';
import { Context } from '../store/index';

const Menubar = () => {

  const { isPlay, setIsPlay } = useContext(Context);

  const onClickPlayMusicButton = useCallback(() => {
    setIsPlay(!isPlay);
  }, [isPlay, setIsPlay]);

  return (
    <div>
      <ul>
        <li>
          <Link to='/'>Home</Link>
        </li>
        <li>
          <Link to='/author'>Author</Link>
        </li>
        <button onClick={onClickPlayMusicButton}>{isPlay ? '⏹' : '▶'}</button>
      </ul>
    </div>
  );
};

export default Menubar;

Menubar 의 버튼을 클릭하면 음악 재생 여부 조절이 가능합니다.

이외에도 리액트에서 상태가 유지되는 점과 원리를 파악하면 활용할 수 있는 기능이 많습니다.

저장소

전체 소스코드는 아래 레포지토리에서 확인이 가능합니다.

https://github.com/KHJcode/keep-music-play-move-pages-blog-example

읽어주셔서 감사합니다.