본문 바로가기

react native28

[React] 컴포넌트 props 타입 지정 typescript를 이용한 react에서 컴포넌트 props의 타입을 지정할 때 몇 가지 방법을 사용할 수 있습니다. 1. React.FC import React from "react"; interface MyComponentProps { name: string; } const MyComponent: React.FC = ({ name }) => { return {name}; }; export default MyComponent;첫 번째 방법은 React.FC를 사용하는 방법입니다. 사이에 타입을 삽입해주면 되는데요, 이 방법의 이점은 아래와 같습니다. props에 기본적으로 children이 들어있는 점 컴포넌트의 defaultProps, propTyps, contextTypes를 설정할 때 자.. 2021. 12. 27.
[React] .js vs .jsx React 또는 React Native 프로젝트를 할 때 .js 확장자를 사용하는 경우도 있고 .jsx 확장자를 사용하는 경우도 있었습니다. 구현하는 방식에서 두 가지 방식에 크게 차이는 없다고 느꼈는데 과연 정말 차이가 없을까에 대한 의문점이 생겨서 이 포스트를 작성해보게 되었습니다. js vs jsx란 키워드를 구글링해보면 가장 먼저 나오는 게시물이 이 스택오버플로우 게시물입니다. https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx ReactJS - .JS vs .JSX There is something I find very confusing when working in React.js. There are plenty of examples .. 2021. 12. 27.
[React Native] Error type 3 Error: Activity class does not exists. react-native run-android 명령어를 이용해 앱을 실행할 때 가끔씩 이런 에러 메시지가 뜨는 경우가 있습니다. adb uninstall `패키지명` 위 명령어를 이용해 디바이스 혹은 에뮬레이터에 설치된 해당 앱을 완전히 삭제해주신 뒤 다시 앱을 실행하게 되면 정상적으로 작동합니다. 2021. 10. 3.
[React Native] Jest 실행 시 [@RNC/AsyncStorage]: NativeModule: AsyncStorage is null. 에러 React Native에서 jest를 이용해 테스트를 실행하던 중 아래와 같은 에러를 발견하였습니다. 루트 폴더에 __mocks__/@react-native-async-storage/async-storage.js 폴더 및 파일을 생성하고 해당 파일 내에 아래 문장을 추가해주면 됩니다. export default from '@react-native-async-storage/async-storage/jest/async-storage-mock.js' 2021. 9. 22.