Navigation

MainNavigation.js 파일을 활용해서 네비게이션링크를 만들어준다.

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

import classes from './MainNavigaton.module.css';

function MainNavigaton(params) {
	return (
	<header className={classes.header}>
		<div className = {classes.logo}>React Meetups</div>
		<nav>
			<ul>
				<li><Link to = '/'>All Meetups</Link></li>
			</ul>
			<ul>
				<li><Link to = 'new-meetup'>All New Meetup</Link></li>
			</ul>
			<ul>
				<li><Link to = '/favorites'>My favorites</Link></li>
			</ul>
		</nav>
	</header>
	);
	
}

export default MainNavigaton;

App.js에서 <MainNavigation />을 불러오면 바로 확인 가능.
혹은 App.js에서 Layout.js 파일을 이용해서 바로 레이아웃을 만들기 가능
App.js

function App() {
	// localhost:3000
	// localhost: 3000/~

	return (
		<div>
			{/* <MainNavigaton /> */}
			{/* only one page is rendered */}
			{/* 위에서부터 찾아서 매치되면 이후는 확인하지 않음  */}
			<Layout>
				<Switch>
					<Route path='/' exact>
						<AllMeetupsPage />
					</Route>
					<Route path='/new-meetup'>
						<NewMeetupPage />
					</Route>
					<Route path='/favorites'>
						<FavoritesPage />
					</Route>
				</Switch>
			</Layout>
		</div>
	);
}

Layout.js

import MainNavigaton from './MainNavigation';
import classes from './Layout.module.css';

function Layout(props){
	return (
		<div>
		<MainNavigaton />
		<main className={classes.main}>
			{props.children}
		</main>
		</div>
	);
}

export default Layout;

MeetupPage만들기

MeetupItem.js 와 MeetupList.js 두 파일로 meetup 페이지 만들기

MeetupItem.js
아이템 내부..를 모두 만들어준다

import Card from '../ui/Card';
import classes from './MeetupItem.module.css';

function MeetupItem(props) {
	return (
		<li className={classes.item}>
			<Card>
				<div className={classes.image}>
					<img src={props.image} alt={props.title} />
				</div>
				<div className={classes.content}>
					<h3>{props.title}</h3>
					<address> {props.address}</address>
					<p>{props.description}</p>
				</div>
				<div className={classes.actions}>
					<button>To favorites</button>
				</div>
			</Card>
		</li>
	);
}

export default MeetupItem;

MeetupList.js
item을 card 컴포넌트를 활용해서 리스트 형태로 만들어준다.
AllMeetups.js 에서 AllMeetupsPage() 함수 내부에서 더미 데이터(원래라면 백에서 받아와야하는 데이터)를 받아와서 리스트 형태로 만든다.
<MeetupList meetups = {DUMMY_DATA} />

import MeetupItem from './MeetupItem';
import classes from './MeetupList.module.css';

function MeetupList(props) {
	return(
		<ul className={classes.list}>
			{props.meetups.map(meetup => 
			<MeetupItem 
			key = {meetup.id}
			image = {meetup.image}
			title = {meetup.title}
			address = {meetup.address}
			description = {meetup.description}
			/>)}
		</ul>
	);
}

export default MeetupList;