[React.js] Kossie Coder - 27강. Home/Movies 페이지 컴포넌트 만들기

1. Home.js : Home 페이지 컴포넌트 생성

import React from "react";

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

export default Home;

2. Movies.js : Movies 페이지 컴포넌트 생성

import React, {useState} from "react";
import MovieForm from "../components/MovieForm";
import Movie from "../components/Movie";

const Movies = () => {
	const [movies, setMovies] = useState([]);

	const removeMovie = (id) => {
		setMovies(movies.filter(movie => {
			return movie.id !== id;
		}));
	};

	const renderMovies = movies.length ? movies.map(movie => {
		return (
			<Movie
				movie={movie}
				key={movie.id}
				removeMovie={removeMovie}
			/>
		);
	}) : '추가된 영화가 없습니다.';

	const addMovie = (movie) => {
		setMovies([
			...movies,
			movie
		]);
	};

	return (
		<>
			<h1>Movie list</h1>
			<MovieForm addMovie={addMovie}/>
			{renderMovies}
		</>
	);
};

export default Movies;

3. App.js : 생성한 페이지 컴포넌트 반영

import React from "react";
import Navbar from "./components/Navbar";
import Users from "./pages/Users";
import Home from "./pages/Home";
import Movies from "./pages/Movies";
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';

function App() {
	return (
		<Router>
			<div className="App">
				<Navbar/>
				<div className="container">
					<Switch>
						<Route path="/movies">
							<Movies/>
						</Route>
						<Route path="/users">
							<Users/>
						</Route>
						<Route path="/" exact>
							<Home/>
						</Route>
					</Switch>
				</div>
			</div>
		</Router>
	);
}

export default App;