Don't think! Just do it!

종합 IT 기술 정체성 카오스 블로그! 이... 이곳은 어디지?

react native에서 flutter로 갈아타기 4

React Native에서 Flutter로 갈아타기 #8 - Navigation

React native에서는 react navigation를 사용했었는데.... react navigation 말고 다른 옵션이 있나? 음.. 암튼 React navigation에는 여러가지 navigator가 있는데 보통 Bottom tab navigator에 stack navigator를 합쳐서 사용해. Bottom tab으로 3-4개의 tab을 마련하고 그 안에 여러개의 screen이 stack navigator에 묶여 있는 거지. 페이스북을 예로들면 6개의 tab이 있고 각 탭마다 여러개의 screen을 가지고 있는 stack navigator가 있어. 그래서 사용자가 댓글달기를 누르거나 사용자 사진을 누르면 tab은 가만히 있고 stack navigator 안의 스크린만 샥 이동하는 거지. 그래..

React Native에서 Flutter로 갈아타기 #6 - Props 전달

React Native에서는 하위 컴포넌트로 데이터를 전달할 때 props을 사용했지. 👇👇 import React, { useState,useEffect } from 'react'; import { Text, TouchableOpacity, View, Button } from 'react-native'; function App() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prev => prev + 1); console.log(number); } const onDecrease = () => { setNumber(prev => prev - 1); console.log(number); } return ( {..

React Native에서 Flutter로 갈아타기 #4 - useState => setState

React native 상태 관리가 쉬웠었나? 어려웠나?.. 글쎄.. 난 늦게 react native를 시작해서 useState() 같은 훅으로 상태 관리하는 걸 배웠거든.... 그래서 음.. 딱히 어렵지 않았어. 예를 들어 number라는 state가 유지되게 하려면 아래처럼 👇👇 useState()를 사용했잖아? import React, { useState } from 'react'; import { Text, TouchableOpacity, View } from 'react-native'; function App() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prev => prev + 1); cons..

React Native에서 Flutter로 갈아타기 #3 - Layout

React native와 flutter를 layout 측면에서만 살펴볼거야. 문법(?)적인 차이는 표준 문서를 보도록 하고 이 글에서는 React native에서 주로 사용하는 컴포넌트에 대응하는 Flutter 위젯이나 구현 방식 등에 대해서만 이야기하도록 할게. 먼저 React native는 html처럼 태그로 컴포넌트들을 감싸서 layout을 만드는데 비해 flutter는 함수를 호출하는 것처럼 보여.👇 // React Native ... return ( Hello world ); ... // Flutter ... return Container( child: Text("Hello world"), ) ... 그래서 React는 (태그가) 중첩되면서 복잡해지고 ㅋㅋㅋ Flutter는 (),{} 가 중첩되..

반응형