[React.js] Kossie Coder - 15강. 영화 삭제하기

1. Movie.js : 부모 컴포넌트로부터 removeMovie 함수 가져오기

import React from "react";

const Movie = ({movie, removeMovie}) => {
	return (
		<div className="movie">
			<div className="movie-title">
				{movie.title}
				<span className="movie-year">
					({movie.year})
				</span>
			</div>
			<div>
				<button onClick={() => removeMovie(movie.id)}>삭제</button>
			</div>
		</div>
	);
};

export default Movie;

2. MovieForm.js : Movie 객체 id 요소 추가

...
	const onSubmit = (event) => {
		event.preventDefault();

		addMovie({
			id: Date.now(), // 타임스탬프를 id로 설정
			title: movieTitle,
			year: movieYear
		});
		resetForm();
	};
...

3. App.js : removeMovie 함수 추가 및 key값 재설정

...
	const removeMovie = (id) => {
		// filter 함수를 통해서 조건에 맞는 요소들만 return
		setMovies(movies.filter(movie => {
			return movie.id !== id;
		}));
	};

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

---

강의 링크

https://youtu.be/lPyQmmSrNd8