• 카테고리

    질문 & 답변

  • 세부 분야

    모바일 앱 개발

  • 해결 여부

    해결됨

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

21.11.26 18:20 작성 조회수 232

0

- 학습 관련 질문을 impoact 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</Title>
                    <StatusBar
                         barStyle="light-content"
                         backgroundColor={theme.background}
                    />
                    <Input
                         placeholder="작업추가하기"
                         value={newTask}
                         onChangeText={(text) => setNewTask(text)}
                         onSubmitEditing={addTask}
                    />
               </Container>
          </ThemeProvider>
     );
}
 
 
// 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 문의하기를 이용해주세요.
course-thumbnail

처음 배우는 리액트 네이티브

답변 3

·

답변을 작성해보세요.

0

shafeel2님의 프로필

shafeel2

질문자

2021.11.27

감사합니다 

앞으로 님께서 올리시는 모든 강의는 모두 들어보겠습니다

제게는 너무 유익하고 깊이 있는 내용들이었습니다 

구독자 폭증으로 번창하세요 *.^

 

 

김범준님의 프로필

김범준

지식공유자

2021.11.27

감사합니다 :)

0

shafeel2님의 프로필

shafeel2

질문자

2021.11.27

아 ! 말씀주신대로 해보니 정상작동하는군요

항상 성실하시고 정성가득하신 님의 답변에 감사드립니다

참 그리고 리액트네이티브와 mysql 과는 호환이 불가능한건지요 

제가 원래 php mysql 로 작업한 경험이 많아  mysql 은 익숙합니다

늘 건강하시옵고 부자되소서 ..

김범준님의 프로필

김범준

지식공유자

2021.11.27

안녕하세요, 

리액트 네이티브에서 mysql을 사용하는것은 불가능합니다. 

  

php-mysql에 익숙하시면, 강의를 모두 듣고나서
php-mysql을 이용해서 원하는 api서버를 하나 만든 후, 
해당 api를 이용해서 원하는 프로젝트를 진행해 보시기 바랍니다. 

외부 api를 이용하는 방법은 hook강의에서 진행됩니다. (섹션 6. Hooks - 커스텀 Hooks)

  

다만, 강의의 내용과 관련 없는 부분 혹은, 강의 내용을 벗어나는 부분에 대한 질문은 답변하지 않고 있는점 양해 부탁드립니다. 

  

즐거운 하루 되세요
감사합니다. 

0

김범준님의 프로필

김범준

지식공유자

2021.11.26

안녕하세요 shafeel2 님, 

  

질문을 할때는 작업중인 코드를 깃헙에 올리고, 레포 링크를 남겨주세요

  

문제는 에러 메시지를 보면서 파악하는 연습을 하는것이 좋습니다. 

Unexpected character라고 되어 있고, 29라인이라고 나와있네요.
29라인은 onChangeText라고 표시해주고 있습니다. 

 

작성해주신 코드를 눈으로 봐서는 이상한게 보이지 않지만, 
에러메시지에서 문제로 지적한 onChangeText라인을 삭제후, 다시 작성하면 문제없이 동작하는것을 알 수 있습니다. 

실제로 IDE에 복사 후, onChangeText아래에 있는 onSubmitEditing부터 한칸씩(한 스페이스씩) 삭제하다보면, onChangeText에서 빈칸이 아닌 무언가 삭제되는것을 알 수 있습니다. 

조금 더 정확하게 확인하기위해 크롬 개발자도구의 console 탭에서 코드를 복사해보면, 
이상한 무언가가 있다는 것을 눈으로 확인할 수 있습니다. 

아마 코드 입력 과정에서 한글/영문을 변경하면서 작성하다가 잘못된 특수문자가 들어가지 않았나 생각합니다. 
(리액트 네이티브에서 겪은 경험은 아니지만, 비슷한 경험이 있습니다.)

   

문제가 되는 onChangeText줄을 삭제하시고, 다시 작성해보세요. 
혹은, 제가 앞에서 설명한대로 onSubmitEditing에서부터 onChangeText까지 가면서
빈칸을 모두 삭제 후 다시 시도해 보시기 바랍니다. 

 

즐거운 하루 되세요
감사합니다. 

이 글과 비슷한 Q&A