본문 바로가기

프로그래밍/ReactJS, React Native

React.js 의 class 방식과 function 방식 비교 (react hook) 2020. 5. 28. React.js 의 Class 사용방식과 Function 을 사용한 hook, custom hook 이렇게 3가지 방식을 비교한 코드입니다. 작동은 전부 동일합니다. props 를 통해 300 값을 전달하여 카운팅 -1 을 1초마다 작동합니다. 버튼 onclick 을 통해 + 10 만큼 추가 됩니다. App.js import React, { Component } from 'react'; import './App.css'; import { Countdown } from './countdown' import { CountdownClass } from './countdownClass' import { CountdownWithUseInterval } from './countdownWithUseInterval' ..
react 생성시 public, src,and scripts folder 생성 안될 경우 2020. 3. 17. react 생성시 public, src,and scripts folder 생성 안될 경우 전역으로 create-react-app 을 전부 삭제하고 재설치하는게 답이다. 아래 1,2,3 순서대로 실행하면 잘 됩니다. https://github.com/facebook/create-react-app/issues/8088 public, src,and scripts folder not created while installing react-app · Issue #8088 · facebook/create-react-app npx version: 6.13.2 node version: 12.13.1 npm : 6.13.2 Created a react-app using: npx create-react-app my-app..
requireNativeComponent: "RNCWebView" was not found in the UIManager 2019. 11. 5. requireNativeComponent: "RNCWebView" was not found in the UIManager /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React from 'react'; import WebView from 'react-native-webview'; const App: () => React$Node = () => { return ( ); }; export default App; 실행할 경우 webview 에 대해 제대로 설치가 안되어 실행이 되지 않은 에러 구문입니다. 오류가 발생할 경우, 아래와 같은 절차로 mac 의 터미널에서 실행하..
react class 와 react hooks 를 활용한 함수형 방식 구현 비교 2019. 8. 21. react 를 class 방식으로 구현하는 방법이 있고, hooks 을 사용하는 함수형 방식으로 구현이 가능하다.hooks 로 구현하면 useState(기본값) 을 통해 상태값을 조절 가능하다.class 보다 hooks 를 활용한 함수형 코딩이 더 간결하면서 가독성이 강하다. import React, { useState } from "react";import ReactDOM from "react-dom"; import "./styles.css"; const App = () => { const [item, setItem ] = useState(1); const incrementItem = () => setItem(item + 1); const decrementItem = () => setItem(item ..
React, Redux, and Firebase 로 todo 앱 만들기 2019. 6. 22. A Simple Todo App withe React, Redux, and Firebase https://github.com/rajatk16/firedux-todo firebase 은 realtime database 에서 추가, 삭제가 이루어 진다. React와 함께 Redux 라이브러리를 사용하여이 앱의 상태를 관리합니다. Redux는 ToDo 앱처럼 단순한 앱에는 필요하지 않지만 Redux를 다른 React App에 추가하는 데 필요한 단계를 이해하는 데 도움이됩니다!Google의 Firebase는이 애플리케이션에서 사용할 놀라운 기술 중 하나입니다. Firebase는 인증, 저장, 테스트 및 데이터베이스와 같은 다양한 기능과 서비스를 제공 할 수 있습니다. 그러나이 게시물에서는 파이어베이스를 사용하..
React 를 통해 Firebase Authentication 사용해 보기 2019. 6. 22. React 를 통해 Firebase Authentication 사용해 보기 필자는 Firebase로 인증을 완료하고 React를 신속하게 처리하기위한 간단한 가이드를 작성하고자했습니다.나는 여기서 매우 직접적이고 직설적 일 것이다. 인증 된 경로와 같은 엣지 경우를 다루지 않거나 오류 메시지를 올바르게 표시하지 않겠습니다.이 튜토리얼에서는 기본적인 Google 인증을 수행하는 데 필요한 최소한의 변경 만 수행 할 것입니다.우리는 몇 가지 오픈 소스 프로젝트를 사용할 것입니다.https://github.com/nodejs/nodehttps://github.com/facebook/reacthttps://github.com/facebook/create-react-apphttps://github.com/arma..
React App 을 Surge 에 배포해 보기 2019. 6. 22. React App 을 Surge 사이트에 배포하는 방법에 대해 알아보고자 합니다. 해당 사이트는 https://surge.sh/ 이며 배포하는 방법이 매우 쉽습니다. 이는 단지 html , css , js 로 구성된 소스는 전부 무료로 사용이 가능하며, 배포시에는 서브도메인 별도로 제공해 줍니다. React App 을 개발하면 이를 배포하기 위해 build 명령어를 사용할 필요가 있는데요. npm run build 명령어를 실행하면 build 폴더가 생성되면서 해당 폴더 내에 optimized 되어 소스가 저장됩니다.해당 build 폴더의 내용을 surge 사이트에 배포해 보겠습니다. ✘ shimjaewoon@shimjaewoonui-MacBook-Air  ~/desktop/work/react/reac..
React 의 props 활용하기 - codepen 2018. 6. 7. https://codepen.io/shimjaewoon/pen/xzOowp?editors=1010 ; class Codelab extends React.Component{ render(){ return( hello {this.props.name} {this.props.children} ); }} class App extends React.Component{ render(){ return( {this.props.children} ); }} ReactDOM.render(luckshim,document.getElementById('root')); react 에서 props 를 활용한 방법입니다. "this.props.속성"을 의미하며, this.props.children 은 내용 양쪽 태그 글 내용에 표현됩니다.