Input 컴포넌트 만들기 - 상세 설정에서 에러 원인에 대해서

Question

- 학습 관련 질문을 impo act from 'react' ; // App.js 파일 import { StatusBar } from 'react-native' ; import React , { useState } from 'react' ; import { Text , View , LogBox } from 'react-native' ; import styled , { ThemeProvider } from 'styled-components/native' ; import { theme } from './src/theme' ; import Input from './src/input' ; const Container = styled . SafeAreaView ` flex : 1 ; background-color : ${ ({ theme }) => theme . background } ; align-items : center ; justify-content : flex-start ; padding : 30px ; ` ; const Title = styled . Text ` font-size : 40px ; font-weight : 600 ; color : ${ ({ theme }) => theme . main } ; width : 100% ; align-items : flex-end ; padding : 0 20px ; ` ; export default function App () { LogBox . ignoreLogs ([ 'Remote debugger' ]); const [ newTask , setNewTask ] = useState ( '' ); const addTask = () => { alert ( newTask ); setNewTask ( '' ); }; return ( < ThemeProvider theme = { theme } > < Container > < Title > To Do List < StatusBar barStyle = "light-content" backgroundColor = { theme . background } /> < Input placeholder = "작업추가하기" value = { newTask } onChangeText = { ( text ) => setNewTask ( text ) } onSubmitEditing = { addTask } /> ); } // input.js import React from 'react' ; import styled from 'styled-components/native' ; import { Dimensions , useWindowDimensions } from 'react-native' ; import PropTypes from 'prop-types' ; const StyledInput = styled . TextInput . attrs (({ theme }) => ({ placeholderTextColor : theme . main , })) ` width : ${ ({ width }) => width - 40 } px; height : 60px ; margin : 3px 0 ; padding : 15px 20px ; font-size : 25px ; border-radius : 10px ; background-color : ${ ({ theme }) => theme . itemBackGround } ; color : ${ ({ theme }) => theme . text } ; ` ; const Input = ({ placeholder , value , onChangeText , onSubmitEditing }) => { const { height , width } = useWindowDimensions (); return ( < StyledInput width ={ width } placeholder ={ placeholder } maxLength ={ 50 } autoCapitalize = 'none' autoCorrect ={ false } value ={ value } onChangeText ={ onChangeText } onSubmitEditing ={ onSubmitEditing } /> ); }; // 자동대문자 off // 오타자동수정기능off Input . propTypes = { placeholder : PropTypes . string , value : PropTypes . string . isRequired , onChangeText : PropTypes . func . isRequired , onSubmitEditing : PropTypes . func . isRequired , }; export default Input ; 위 파일을 실행하니 아래에러가 뜨는데 원인을 모르겠군요 ... 참고로 전 윈도우10환경에서 expo 로 실행시키고 있습니다 SyntaxError: D:\study\ReactNative\app_expo\src\input.js: Unexpected character ''. (29:43) 27 | autoCorrect = { false } 28 | value = {value} > 29 | onChangeText = {onChangeText} | ^ 30 | onSubmitEditing = {onSubmitEditing} 31 | / > 32 | ) ; . 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

shafeel2 · Answer

감사합니다 앞으로 님께서 올리시는 모든 강의는 모두 들어보겠습니다 제게는 너무 유익하고 깊이 있는 내용들이었습니다 구독자 폭증으로 번창하세요 *.^

shafeel2 · Answer

아 ! 말씀주신대로 해보니 정상작동하는군요 항상 성실하시고 정성가득하신 님의 답변에 감사드립니다 참 그리고 리액트네이티브와 mysql 과는 호환이 불가능한건지요 제가 원래 php mysql 로 작업한 경험이 많아 mysql 은 익숙합니다 늘 건강하시옵고 부자되소서 ..

김범준 · Answer

안녕하세요 shafeel2 님, 질문을 할때는 작업중인 코드를 깃헙에 올리고, 레포 링크를 남겨주세요 문제는 에러 메시지를 보면서 파악하는 연습을 하는것이 좋습니다. Unexpected character라고 되어 있고, 29라인이라고 나와있네요. 29라인은 onChangeText라고 표시해주고 있습니다. 작성해주신 코드를 눈으로 봐서는 이상한게 보이지 않지만, 에러메시지에서 문제로 지적한 onChangeText라인을 삭제후, 다시 작성하면 문제없이 동작하는것을 알 수 있습니다. 실제로 IDE에 복사 후, onChangeText아래에 있는 onSubmitEditing부터 한칸씩(한 스페이스씩) 삭제하다보면, onChangeText에서 빈칸이 아닌 무언가 삭제되는것을 알 수 있습니다. 조금 더 정확하게 확인하기위해 크롬 개발자도구의 console 탭에서 코드를 복사해보면, 이상한 무언가가 있다는 것을 눈으로 확인할 수 있습니다. 아마 코드 입력 과정에서 한글/영문을 변경하면서 작성하다가 잘못된 특수문자가 들어가지 않았나 생각합니다. (리액트 네이티브에서 겪은 경험은 아니지만, 비슷한 경험이 있습니다.) 문제가 되는 onChangeText줄을 삭제하시고, 다시 작성해보세요. 혹은, 제가 앞에서 설명한대로 onSubmitEditing에서부터 onChangeText까지 가면서 빈칸을 모두 삭제 후 다시 시도해 보시기 바랍니다. 즐거운 하루 되세요 감사합니다.