> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/react/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/react/til/curious-story/component.md).

# 컴포넌트 이해

## 1. 문제

리액트로 폼 컨트롤을 실습하면서 작은 오류를 만났다. input에 value를 입력하는데 state가 변경되야 하지만 props가 변경되었다. 

도대체 뭐가 문제일까 하며 이렇게 저렇게 계속 코드를 작성해 봤지만 머리만 점점 복잡해질 뿐 원인을 찾기 쉽지 않았다. 

![state가 아닌 props의 content가 변경된다. ](/files/-MTnpYaL5GfnCts3u-4e)

{% embed url="<https://stackblitz.com/edit/react-1jbwa9?file=src%2Fcomponents%2FAppInput.js>" %}
위의 이미지의 문제가 있는 그대로 코드를 저장한 폼 예제&#x20;
{% endembed %}

## 2. 해결&#x20;

결국 내가 작성한 코드를 전부 지우고 영상강의를 보며 다시 하나 하나 입력해 보았다. 그리고 이전에 작성한 코드와 비교해보니 내가 컴포넌트 구성에서 중요한 부분을 놓쳤다는 것을 알았다.&#x20;

아직, App 파일과 컴포넌트에 대한 명확한 역할 구분하지 못했던 것이다.        &#x20;

이번에 다시 공부를 하면서 아래와 같이 App과 컴포넌트의 역할을 다시 한 번 정리 한다.&#x20;

![](/files/-MTnmI2Ufz8hIiXG7RKP)

{% hint style="info" %}
20200219 다시 정리하는 App의 역할

위의 이미지 처럼 App은 기본값을 성정하는 역할만 하는 것이 아니다.&#x20;

App 파일의 역할은 index.js(앤트리 파일)에 마운트 되는 역할을 하기 때문에 **컴포넌트를 한 곳에 모은다.** 하지만 내가 알고 있는 것과 다르게 App은 **기본값** 뿐만 아니라 **함수와 상태를 가질 수 있다.** 해당 예제는 [폼컨트롤의 멀티 \<input> 예제](https://shhn0509.gitbook.io/react/react-study/react/form-control#3-2-less-than-input-greater-than)에서 확인 할 수 있다.&#x20;
{% endhint %}