코지코더 React 14. 자식 컴포넌트에서 부모 컴포넌트 스테이트 변경하기

기존코드에 있던 form을 컴포넌트로 빼내는 작업을 해보겠다.

전체적인 틀과 추가 기능을 컴포넌트로 따로 만들어 배치해 본문의 코드를 줄여볼 생각이다.

 

 

App.js

새로 만든 MoiveForm.js

App.js에 있던 리스트에 영화를 추가하는 기능을 MovieFrom.js에 넣어 따로 컴포넌트로 만들었고 페이지의 기본적인 틀도 같이 담아넣었다. 이를 위해 사용한 것이 props이다.

 

props는 앞서 사용했었던 것으로 부모 컴포넌트에서 자식 컴포넌트로 정보를 넘길 때 쓴다. 우리는 영화를 리스트에 추가하는 기능을 MovieForm.js라는 자식 컴포넌트로 옮겨준다.

그래서 App.js의 30을 보면 addMovie={addMovie}로 자식 컴포넌트에게 20번의 addMovie함수를 넘기는 것을 확인할 수 있다. 이때 넘어간 addMoive는 MovieForm.js에서 4번째 줄에서 쓰이는데 이때 props가 아닌 addMoive로 쓰이는 이유는 원하는 props를 쓰기위해서다.

이것은 MovieForm.js로 넘어가며 다음과 같이 작동한다.

먼저 타이틀과 연도에 적용시킬 useState를 만들어두고 이후 입력 후 그 창을 리셋할 함수(resetForm)를 만들어둔다.

그리고 onSubmit이라는 함수를 만들어 리스트를 추가하는 함수를 만들었다. 이때 우리가 가져온 addMovie를 사용하였다. 그리고 리스트가 추가 된 다음 입력창이 리셋이 되도록 resetForm을 실행시켰다.

이후에는 기본적인 form의 형식을 적어두었다. 기존에 App.js가 가지고 있었던 것을 MoiveForm으로 가져온 것이다.

이렇게 만든 결과 잘 작동했고 App.js는 짧고 간결해졌다.

하면서 느끼는 것은 굳이 이렇게 번거롭게 여러 파트로 나눠서 만들어야 하나라는 생각이 들긴 했지만 지금보다 많은 기능을 가지고 있고 그것이 한 곳에 모여있으면 분명 App.js가 길고 복잡해서 유지보수하기 힘들것이다. 그러나 지금처럼 필요한 기능을 따로 보관하고 유지보수할 때 그것을 꺼내어 한다면 훨씬 수월하게 할 수 있을 것이다.

그래서 지금과 같이 하는 것이 중요하다는 생각이 들었다.

 

⁂참고문헌⁂

1. 화살표 함수
화살표 함수를 알고 있긴 했지만 몇 개를 잘못 알고 있었다. 그래서 아래 페이지를 통해 다시 개념을 숙지하였다.

https://ko.javascript.info/arrow-functions-basics#ref-171

화살표 함수 기본