반업주부의 일상 배움사

index.html 파일 하나로 끝내보죠. react.js와 react-dom.js만 있으면 돼요. 에 이걸 넣어요. ReactDOM으로 리액트의 루트를 원하는 위치에 끼워넣는다고 생각하면 돼요. 이번엔 클래스 컴포넌트를 만들어 봐요. 이번엔 함수 컴포넌트를 만들어 봐요. 클래스 컴포넌트의 props에 값을 넘겨봐요. 컴포넌트를 재사용할 수 있어요. 함수 컴포넌트의 props에도 값을 넘겨요. 클래스 컴포넌트는 생성주기에 따라 자동으로 호출되는 메소드가 있어요. 태그를 생성할 때 속성값을 넣을 수 있어요. 태그로 해보죠. 한 번 보여주고 끝나는 페이지는 재미없죠? 클래스 컴포넌트에는 state라는 속성과 setState라는 메소드가 있어서 값이 변할 때마다 render가 다시 호출되요. 화면을 다시 그린..

개발 환경 expo-cli 설치 sudo npm install -g expo-cli 프로젝트 생성 및 실행 expo init todo_app cd todo_app yarn start # blank 또는 blank (Typescript) 선택 w 누르고 웹에서 실행 * 여기서는 상태 관리를 위해 MobX(https://mobx.js.org/) 를 이용해요. sudo yarn add mobx mobx-react UI Store.tsx import { observable } from 'mobx'; const store = observable({ todos: [], add(newTodo) { this.todos.push(newTodo); } }); export { store }; Header.tsx import..

개발 환경 expo-cli 설치 sudo npm install -g expo-cli 프로젝트 생성 및 실행 expo init todo_app cd todo_app yarn start # blank 또는 blank (Typescript) 선택 w 누르고 웹에서 실행 * 여기서는 상태 관리를 위해 ActiveJS(https://activejs.dev/) 를 이용해요. sudo npm i @activejs/core --save UI Header.tsx import React, { Component } from 'react'; import { StyleSheet, View, TextInput, TouchableOpacity } from 'react-native' import { MaterialCommunityI..