[React.js] Kossie Coder - 12강. 영화 리스트 추가 폼 만들기 1

1. 배열의 state화

1. form의 입력값들을 state 변수로 받는다.
2. Submit 시에 state 변수에 담긴 값들을 state의 배열 변수에 담는다.

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

function App() {
	const [movieTitle, setMovieTitle] = useState('');
	const [movieYear, setMovieYear] = useState('');
	const [movies, setMovies] = useState([
		{title: 'kossie coder1', year: 2001},
		{title: 'kossie coder2', year: 2002},
		{title: 'kossie coder3', year: 2003},
		{title: 'kossie coder4', year: 2004}
	]);

	const renderMovies = movies.map(movie => {
		return (
			<Movie movie={movie} key={movie.title}/>
		);
	});

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

		setMovies([
			...movies, // 기존 배열들 +
			{
				title: movieTitle,
				year: movieYear
			}
		]);
	};

	return (
		<div className="App">
			<form onSubmit={addMovie}>
				<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>
		</div>
	);
}

export default App;

---

강의 링크

https://youtu.be/EJX51eP_fxA