useState 객체 사용

useState를 사용하여 객체를 다루고, 객체 요소를 추가할 수 있습니다.

• 영화 리스트에 항목 추가하기

const [movies, setMovies] = useState([
  {title: 'Harry Potter1', year: 2001},
  {title: 'Harry Potter2', year: 2002},
  {title: 'Harry Potter3', year: 2003},
  {title: 'Harry Potter4', year: 2004},
]);

useState를 사용해서 movies 객체의 항목을 변경할 수 있도록 해줍니다.

const addMovie = (event) => {
  // refresh 막기 위해 사용
  event.preventDefault();
  setMovies([
		// 기존 데이터 보존
    ...movies,
    {
      title: movieTitle,
      year: movieYear,
    }
  ])
};

setMovies 함수를 사용해 event값을 입력받으면 movieTitle값과 movieYear값을 movies 객체에 추가해줍니다.

주의!

...movies,를 쓰지 않으면 기존의 있던 데이터들이 새로 들어온 데이터로 변경되어 사라지기 때문에, 기존 데이터를 보존하면서 추가하고 싶으면 꼭 써준 후에 추가하고자 하는 객체를 적어줍니다.

...{}는 기존 데이터 값을 뜻합니다.

'킬러의 보디가드' 영화 항목 추가

영화 제목과 개봉 년도를 추가한 후에 입력창을 다시 빈칸으로 만들기 위해 set~함수를 이용해 빈문자열로 변경해줍니다.

setMovieTitle('');
setMovieYear('');