[Kossie Coder] 영화 삭제하기 - 현재 시간 id로 저장

// App.js

import React, { useState } from 'react';
import './index.css';
import Movie from './components/Movie';
import MovieForm from './components/MovieForm';

function App() {
  const [movies, setMovies] = useState([]);

  🌟const removeMovie = (id) => {
    console.log(id);  // 삭제 버튼 클릭 시 영화 추가할 때 id로 저장한 값 출력
  };🌟

  const renderMovies = movies.length
    ? movies.map((movie) => {      🌟// 현재 시간을 담은 id를 키값으로 설정🌟  
        return <Movie movie={movie} 🌟key={movie.id}🌟 🌟removeMovie={removeMovie}🌟 />;
      })                                   🌟// removeMovie 함수 props로 보내기🌟
    : '추가된 영화가 없습니다.';
  const addMovie = (movie) => {
    setMovies([...movies, movie]);
  };

  return (
    <div className="App">
      <h1>Movie list</h1>
      <MovieForm addMovie={addMovie} />
      {renderMovies}
    </div>
  );
}
export default App;

// MovieForm.js

import React, { useState } from 'react';

const MovieForm = ({ addMovie }) => {
  const [movieTitle, setMovieTitle] = useState('');
  const [movieYear, setMovieYear] = useState('');

  const resetForm = () => {
    setMovieTitle('');
    setMovieYear('');
  };

  const onSubmit = (event) => {
    event.preventDefault();
    addMovie({
      🌟id: Date.now(),  // 영화 추가 시 현재 시간 id로 저장🌟
      title: movieTitle,
      year: movieYear,
    });
    resetForm();
  };

  return (
    <form onSubmit={onSubmit}>
      <input
        type="text"
        value={movieTitle}
        placeholder="영화제목"
        onChange={(e) => setMovieTitle(e.target.value)}
      />
      <br />
      <input
        type="text"
        value={movieYear}
        placeholder="개봉연도"
        onChange={(e) => setMovieYear(e.target.value)}
      />
      <br />
      <button type="submit">영화추가</button>
    </form>
  );
};

export default MovieForm;

// Movie.js

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>            🌟// 삭제 버튼 클릭 시 removeMovie 함수에 id 전달🌟
    </div>
  );
};

export default Movie;

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */