컴포넌트 이해
Last updated
Last updated
리액트로 폼 컨트롤을 실습하면서 작은 오류를 만났다. input에 value를 입력하는데 state가 변경되야 하지만 props가 변경되었다.
도대체 뭐가 문제일까 하며 이렇게 저렇게 계속 코드를 작성해 봤지만 머리만 점점 복잡해질 뿐 원인을 찾기 쉽지 않았다.
결국 내가 작성한 코드를 전부 지우고 영상강의를 보며 다시 하나 하나 입력해 보았다. 그리고 이전에 작성한 코드와 비교해보니 내가 컴포넌트 구성에서 중요한 부분을 놓쳤다는 것을 알았다.
아직, App 파일과 컴포넌트에 대한 명확한 역할 구분하지 못했던 것이다.
이번에 다시 공부를 하면서 아래와 같이 App과 컴포넌트의 역할을 다시 한 번 정리 한다.
20200219 다시 정리하는 App의 역할
위의 이미지 처럼 App은 기본값을 성정하는 역할만 하는 것이 아니다.
App 파일의 역할은 index.js(앤트리 파일)에 마운트 되는 역할을 하기 때문에 컴포넌트를 한 곳에 모은다. 하지만 내가 알고 있는 것과 다르게 App은 기본값 뿐만 아니라 함수와 상태를 가질 수 있다. 해당 예제는 폼컨트롤의 멀티 <input> 예제에서 확인 할 수 있다.
