앞에서 input을 사용할 떄 State를 만들고 value prop으로 내려주었다.
onChange prop으로 State를 변경하는 handleChange함수를 내려줬었다.
이렇게 하면 리액트 State와 input의 value를 일치시킬 수 있었다.
이런 방식은 제어컴포넌트이다.
input의 value값을 리액트에서 지정한다.
제어 컴포넌트(Controlled Component)
target.value값을 대문자로 바꾸어보면
소문자로 입력했던 input값이 대문자로 바뀌는 것을 확인할 수 있다.이런 식으로 input의 value와 onChange헨들러를 사용하면
input의 값을 제어할 수 있다.
이런 컴포넌트를 제어 컴포넌트라고 한다.
비제어 컴포넌트(Uncontrolled Component)
input의 value값을 리액트에서 지정하지 않는다.
value prop을 제거해보면
소문자로 입력했을 때 그대로 소문자로 나오지만
리액트 개발자도구에서 State값을 살펴보면 대문자로 바뀌어있는 것이 보인다.리액트에서 사용하는 값과 실제 input값이 다르다.
상위 컴포넌트에서 받은 prop으로 input값을 내려주는 예시
MyComponent에는 value값과 onChange prop을 받아서
State대신에 onChange로 바꾸어준다.그리고 State를 만드는 코드는 상위 컴포넌트인 App으로 옮기고
State값을 MyComponent에 prop으로 넘겨주었다.
여기에 값을 지우는 버튼을 추가했다.
handleClear라는 함수를 만들어서 setValue값을 빈 문자열로 만들어주겠다.
지우기 버튼을 만들고 onClick헨들러로 handleClear를 내려준다.
MyComponent는 제어컴포넌트로 만들었기때문에
항상 input값이 value prop의 값이다.
즉, App 컴포넌트에 있는 value State값과 같다.
그렇기때문에 지우기버튼을 누르면 실제 input값도 지워진다.
이런 식으로 제어컴포넌트에서는 리액트에서 사용하는 값과
실제 input값이 일치하기때문에 동작을 예측하기 쉽고
input값을 여러군데에서 바꿀 수 있다는 장점이 있다.
