오류 질문

한 입 크기로 잘라먹는 Next.js(15+)

7.4) 리뷰 재검증 구현하기

해결된 질문

24.09.30 14:17 작성

안녕하세요 강사님 강의를 보면서 따라하는 도중에

오타가 없는거같은데 오류가 발생해서 질문드립니다.

value값을 onChange 있는곳에 써야하는데 쓰지 않아서 발생하는 문제인거 같은데 해당 오류 때문에 TextArea도 정상적으로 css부분이 적용되지 않습니다.

react typescript next.js

답변 3

이정환 Winterlood

지식공유자

2024. 09. 30. 15:26

안녕하세요 이정환입니다.

우선 해당 경고 메세지는 수정을 권고하는 경고 수준의 메세지입니다 (자세히 읽어보시면 Error가 아닌 Warning 이라고 표시되어 있어요) 따라서 오류가 발생한 것은 아니며 이로 인해 CSS 적용이 되지 않거나 하지는 않습니다. CSS는 다른 이슈로 인해 적용되지 않았을 것 같아요

이 경고 메세지가 발생하는 이유는 value Props는 전달해줬으면서 onChange는 전달하지 않아 폼이 수정 불가능 한 상태가 되었을 때 발생합니다. 이럴 경우 웹 브라우저는 해당 폼이나 인풋태그에 readOnly 속성을 추가하여 읽기전용 폼으로 만들것을 권장하고 있습니다. 따라서 경고 메세지를 없애시려면 에러 메세지에 나와있는대로 readOnly 프로퍼티를 추가해주시면 됩니다.

강의에서는 기능 동작에 영향을 주는 오류는 아닌 단순 경고이기에 명확히 짚고 넘어가지는 않았는데요 수강하시는 입장에서는 당황스러우실 수 있을 것 같습니다. 불편함을 드렸다면 죄송합니다 🙇‍♂

조만간 동일한 오해가 반복되지 않도록 별도 메세지를 추가해놓거나 영상을 일부 수정해두겠습니다 😃

yjym33

질문자

2024. 09. 30. 14:25

혹시 몰라서 이미지 말고 코드 자체도 남겼습니다.

Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

at input

at form

at section

at div

at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:246:11)

at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9)

at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11)

at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)

at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:350:11)

at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:112:9)

at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:158:11)

at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:157:9)

at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:232:11)

at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:16:44)

at Lazy

at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:370:11)