코지코더 React 13. 영화 리스트 추가 폼 만들기 2

지금까지 만든 모습은 이러하다

리스트에 적으면 추가가 되는 것을 확인할 수 있었다. 다만 아쉬운 부분은 추가된 뒤 입력 칸에 글들이 남아있다. 그래서 이 부분을 고쳐보도록 하자.

36, 37.  setMovieTitle('');  setMovieYear('');

setMovieTitle, setMovieYear에 빈칸을 입력함으로써 앞서 입력한 내용을 리스트에 추가한 뒤 빈칸으로 나타나게 하여 우리가 원하는 대로 만들 수 있다.

 

728x90

 

그리고 앞서 사용했던 스프레드 오퍼레이터(...)에 대해 좀 더 알아보자.

앞서 스프레드 오퍼레이터에 대해 잠깐 설명했었다. 다시 설명하자면 마침표 세 개를 찍고 가져올 배열의 이름을 적으면 배열의 데이터를 가져올 수 있다. 간단한 예를 들어보겠다.

일반적으로 배열에 원소를 추가하려면 다음과 같이 해야 한다.
const x = ['a', 'b']; // a, b
const y = [x[0], x[1], 'c']; //a,b,c

그러나 스프레드 오퍼레이터를 이용하면 다음과 같이 사용할 수 있다.
const x = ['a', 'b']; // a, b
const y = [...x, 'c']; //a, b, c

스프레드 오퍼레이터는 가져올 배열의 데이터가 많을수록 편리하다.

우리가 지금은 이렇게 간단한 배열을 다루지만 회사에서 업무를 볼 때는 복잡한 배열을 다룰 것이고 그것을 일일이 다 손으로 쳐가면서 하면 불편할 것이다. 그때 스프레드 오퍼레이터를 사용하면 좀 더 편하게 업무를 해결할 수 있다.

 

 

⁂느낀점⁂

스프레드 오퍼레이터에 대해 개인적으로 궁금해서 미리 알아봐서 이 강의를 듣는데 매우 수월했다. 그리고 알려주기 전에 미리 찾아봤다는 뿌듯함도 있었다.

스프레드 오퍼레이터는 정말 좋은 기능이다. 앞서 말했듯이 업무에서 요긴하게 사용할 것이기에 꼭 기억해야 한다.