아직 폼을 수정하는 작업이 작동하지 않음을 유의하세요. 위의 샌드박스에서 콘솔 에러가 발생하고 그 이유를 설명하겠습니다.
현재 `onChange` 핸들러 없이 폼의 필드에 `value` prop을 전달하였습니다. 이렇게 하면 읽기 전용 필드가 렌더링 됩니다.
위에 있는 샌드박스를 보면, `ProductTable`와 `SearchBar`가 `filterText`와 `inStockOnly` props를 table, input과 체크 박스를 렌더하기 위해서 읽고 있습니다. 예를 들면, `SearchBar` input의 value를 아래와 같이 채우고 있습니다.
Notice that editing the form doesn't work yet. There is a console error in the sandbox above explaining why:
<ConsoleBlock level="error">
You provided a \`value\` prop to a form field without an \`onChange\` handler. This will render a read-only field.
</ConsoleBlock>
In the sandbox above, `ProductTable` and `SearchBar` read the `filterText` and `inStockOnly` props to render the table, the input, and the checkbox. For example, here is how `SearchBar` populates the input value:
Summary
https://github.com/reactjs/react.dev/blob/main/src/content/learn/thinking-in-react.md?plain=1
442번~446번 줄의 ConsoleBlock 요소가 누락되어있습니다.
Page
https://ko.react.dev/learn/thinking-in-react
Details
Step 4: State가 어디에 있어야 할 지 정하기
https://github.com/reactjs/ko.react.dev/blob/main/src/content/learn/thinking-in-react.md?plain=1 436번째 줄 ~
Step 4: Identify where your state should live
https://github.com/reactjs/react.dev/blob/main/src/content/learn/thinking-in-react.md?plain=1 440번째 줄 ~