frontend

[RN] Warning: A props object containing a "key" prop is being spread into JSX 에러

개요프로젝트를 진행하던 중 의문의 에러가 발생했다. React-Native의 Material-Top-Tab-Navigation이 있는 컴포넌트에 들어가면 해당 에러가 발생했다. 단순한 경고라고 생각하고 넘어갈 수도 있지만 콘솔에는 ERROR로 출력되는 모습이다. 나중에 앱 빌드할 때 문제가 될 수 있으니 해결하고 넘어가려 했다.해결 방법24년 5월 8일 공식 라이브러리의 issue에서 에러 해결법을 찾을 수 있었다. https://github.com/react-navigation/react-navigation/issues/11989 A props object containing a "key" prop is being spread into JSX · Issue #11989 · react-navigation..

[RN] React Native cli Android에서 react-native-vector-icons 라이브러리 사용하기

개요앱 개발을 할 때는 여러 아이콘을 사용하는 경우가 많다.React Native에는 아이콘들을 간편하게 가져와서 사용할 수 있도록 지원하는 react-native-vector-icons 라이브러리가 있다. 사용할 수 있는 아이콘들은 다음 링크에서 볼 수 있다.https://oblador.github.io/react-native-vector-icons/ react-native-vector-icons directory oblador.github.io Expo에서는 자동으로 라이브러리를 사용할 수 있도록 설정해 주지만 React Native cli에서는 라이브러리를 사용하려면 수동으로 설정해주어야 한다.사용 방법인터넷에 검색하면 여러 방법들이 나와 있으나 해당 방법이 가장 간편하다. android/build..

[React] 프로퍼티에 필수, 기본값 지정 / 자식 프로퍼티 사용

필수 프로퍼티 특정 컴포넌트에 반드시 전달되어야 하는 프로퍼티가 있다면, 프로퍼티를 필수 프로퍼티로 지정하여 보낼 수 있다. 필수 프로퍼티는 특수 변수 isRequired를 사용하여 전달할 수 있다. 필수 프로퍼티 사용하기 먼저 App.js에서 object형 프로퍼티와 정수형 프로퍼티 2개를 넘겨 줄 것이다. App.js import Ex from './03/Ex'; import './App.css'; function App() { return ( ); } export default App; 여기서 우리는 requiredNumValue를 기본값으로 지정할 것이다. props는 기본적으로 문자형으로 전달된다. 때문에 prop-types를 사용하여 프로퍼티 자료형을 지정해줘야 한다는 것을 잊어선 안된다. i..

[React] 리액트 시작하기

준비 먼저 컴퓨터에 Node.js를 설치해야 한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당 페이지에서 다운로드를 받을 수 있다. 위 링크로 들어가면 위와 같은 화면이 나올텐데 이 글을 작성한 날짜 기준으로 안정적, 신뢰도 높은 버전이 18.12.1이므로 18.12.1을 설치하는 것을 권장한다. 만약 프로젝트마다 여러 버전의 Node.js를 사용해야 한다면 NVM(Node Version Manager)를 설치하면 된다. https://github.com/coreybutler/nvm-windows/releases Releases · cor..