Page 33 -

<Link to="/red">Red</Link>
</li>
<li>
<Link to="/blue">Blue</Link>
</li>
</ul>
);
};

export default Menu;

단순하게 빨간색, 파란색 박스를 보여 주는 컴포넌트와 각 링크로 이동할 수 있게 해 주는 메뉴 컴

포넌트를 만들었습니다. 이 컴포넌트들을 리액트 앱에서 사용해 보겠습니다.

20.2.2 페이지 컴포넌트 만들기

이번에는 각 라우트를 위한 페이지 컴포넌트들을 만들겠습니다. 이 컴포넌트들은 pages 디렉터
리에 작성해 주세요.

20
pages/RedPage.js
import React from 'react';
import Red from '../components/Red';

const RedPage = () => { 서버 사이드 렌더링
return <Red />;
};

export default RedPage;

pages/BluePage.js

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

const BluePage = () => {
return <Blue />;
};

export default BluePage;

543

리액트를 다루는 기술_개정판(본문)최종출력용.indb 543 2019-08-20 오전 11:03:33