어플화면에서 상품목록들이 나열되어 있을 때 상품리스트 중 하나를 클릭하면 상세화면으로 넘어가게 된다 그때, 해당하는 상품정보를 상세화면으로 이동하면서 데이터를 전달해 주게끔 하는 것을 해보겠다. 1. Route 만들기 일단 페이지가 2개이상 필요하기 때문에, 만들어야 한다. 일단 아래의 링크를 타고 라우터와 페이지 2개를 준비하도록 한다. https://initstory.tistory.com/121 Flutter Route 사용하기 Flutter에도 Route가 있다니 참 놀랍다 React나 Vue 같은 웹프로그래밍에서만 써봤는데, Flutter에도 있으니 바로 써보도록 하겠다 1. 기본코드 main.dart import 'package:flutter/material.dart'; import 'packa..
플러터는 너무 좋은 거 같다. Android와 IOS를 동시에 개발이 가능하면서 Web도 동시에 개발이 가능하기 때문에, 직원을 3명 고용해서 개발해야 할 것을 한 명으로 개발을 할 수 있도록 했다 지금까지 Flutter를 실행 시켰을때 Android Studio의 에뮬레이터를 사용했는데, 웹으로도 실행시키는 방법이 있었다 1. Web으로 실행시키기 정말 간단하다. 아래와 같이 하면 끝이다 정말 이게 끝이다 2. 실행 결과 결과는 아래와 같다 Web으로 보면서 하면 화면 비율이나 등등을 좀 더 확인할 수 있고 개발이 쉬워질 거 같다
드디어 라우팅이라는 것을 공부한다 앙귤러. js나 Vue.js에도 라우터가 있는데, 리엑트도 있을 거라 생각하고 많이 사용할 것 같기때문에 꼭 공부해야지라고 생각했다 리엑트 라우터란, 리엑트는 컴포넌트 기반이라서, 싱글 뭐시기ㅣ 페이지라 해서 페이지를 하나만 써야 하고, 새로고침이 되어선 안된다고 하더라, 그래서 링크를 클릭했을 때 바꿔 치겠끔 해주는 것을 한다 일단 시작하자 1. 라우터 설치 npm install react-router-dom 2. 실습 재료 만들기 (컴포넌트 만들기) 이렇게 page1.js 와 page 2.js를 만들어 준다 (앞글자는 대문자로 하자..) Page1.js const Page1 = () => { return( Page1 입니다 ); } export default Page..
이번 시간에는 useEffect를 사용해 보겠다 useEffect란? 최초 실행을 할때와 내가 원하는 시점에 실행되게끔 하는 함수이다 이렇게 말하면 모를 것 같으니 실습 바로 들어간다 1. Improt 하고. 함수 작성법 import './App.css'; import {useEffect, useState} from 'react' function App() { useEffect(() => { }); return ( ); } export default App; 일단 react에 있는 useEffect를 Import 해주고 그 밑에 다가 useEffect함수를 작성한다 2. 실습 재료 작성 useState에다가 숫자 아무거나 넣어서 하나 작성하고 useEffect에는 set함수를 통해 값을 넣어준다 그다음은..
이번 시간에는 useRef를 사용할 것이다 useRef는 참조한 DOM객체를 뜻한다 일단 뭔 말인지 모를 것이니, 바로 실습 들어간다 사용방법은 useRef를 Import 한 뒤에 아래를 추가한다. 밑에 화면을 참조하도록 하자 const myRef = useRef(); 그리고 테스트를 해보기 위해서 TextBox 2개랑 Button 하나만 추가해 보자 그다음은 myRef를 어디 어떻게 쓰는지 보여주도록 하겠다 당신이 원하는 DOM에다가 속성 ref를 추가하고 값을 저렇게 넣어주면 된다 그다음 함수 ( clickEvent )를 만들어 볼까? const clickEvent = () => { console.log(myRef.current); } 함수를 추가하고 console.log로 한번 내용을 보도록 하자 ..
이때동안 컴포넌트를 App.js 이라는 같은 파일에 다 넣어 놨었다. 하지만 글자수가 많아지면서 눈도 아파 질터이니 따로 분리하도록 한다 그편이 먼 미래에 유지보수도 좋아지기 때문이다 지금부터 이 컴포넌트를 옮겨 보도록 한다 일단 component라는 폴더를 생성하고 그안에다가 따로 격리 시키도록 하자 옮기고 싶은 컴포넌트의 이름과, 동일하게 JavaScript 파일을 생성한다 그리고 간단하게 복붙하였다 근데 const 다음의 함수명이 뭔가 심상치 않다. 아파보이기때문에 문제가 있을 것이다 그리고 App.js에 가봐도, TestComponent가 피가 흐르고 있는 것을 볼 수 있다 그이유는 App.js에는 더이상 TestComponent라는 것이 없기때문이다. 그러므로 import를 하도록 하자 impo..
React를 공부하면서, 서버로부터 List를 받아오고 어떻게 HTML에다가 뿌릴 수 있을까?라고 궁금해했다 그래서 이번엔 찾아보면서 드디어 하는 방법을 알아냈다. 일단 최상위에다가 실습할 컴포넌트를 추가한다 그다음은 컴포넌트를 만드는 함수를 생성해 주도록 하자 const ListComponent = () => { } 그다음 해야 할 일 1. List 데이터를 준비한다 (서버에서 받아온 값이라고 생각하자) 2. element를 만들 리스트 변수 하나 선언 2. for문으로 list값 을 2번에서 만든 변수에 add 하기! 3. 마지막으로 return 하기! 위의 순서대로 작성한다 const ListComponent = () => { let list = ['안녕', '디지몬', '네 꿈을 꾸면서', '잠이..
저번시간에 Component를 만들어 보았다. 근데 상위 Component에서, 하위 Component로 데이터를 보내고 싶었는데 보낼수가 없었다... 왜냐하면 함수가 다르기 때문이였다. 그래서 이번엔 props를 배워보았다. 저번시간에 내용은 이거시다. 일단 props를 이용해서 문자열을 하나 보내보자! 아래의 사진의 빨간색 네모안을 추가하였다 title이나 name이나 src나 저런 것들을 속성이라고 한다 React 도큐멘트에서도 저런식으로 쓰면 된다 카더라 저걸 보고 깨닫고 난 아래의 코드를 작성하였다 props의안에 title라는 속성이 담겨져 있다고 보면 된다 그리고 그걸 바로 변수에 담아서 jsx코드에 넣어 보았다 그러는순간 바로 간지나게 이렇게 되어버렸당 그렇다면 좀 더 응용을 해보자 데이터..
