본문 바로가기

ReactNative9

[ReactNative] 리액트 훅(useState, useEffect)으로 시계 만들기 with Expo 시계와 같은 간단한 기능은 엑스포(Expo)에서도 쉽게 구현할 수 있다. 그럼 지금부터, Expo를 이용해서 시계 기능을 만들어 앱에서 돌려보기 까지 함께 시작해보자! 코드 구상 현재 시간을 1초마다 새로저장해서 화면에 반영해주어야 한다. 그러므로 시간을 저장하는 값을 useState를 통해 저장해줄 것이다. 1초마다 시간을 새로 저장해 줄 때는 setInterval() 함수를 이용해서 만들어줄 것이다. 이 때, 매 초 동작하는 setInterval() 함수를 매 초 재랜더링하여 호출하는 성능저하 문제가 발생한다. 그래서 useEffect를 사용해서 setInterval과 clearInterval을 넣어줄 것이다. 폰트를 설정하여 넣어줄 것이다. 다양한 방법이 있는데, 그 중에서도 expo-font에서 .. 2021. 9. 16.

[Windows 에서 ios 앱 개발] Expo & Expo go 설치부터 셋팅까지! 리액트네이티브(React Native)로 안드로이드(Android)와 IOS를 한번에 개발하는 목표를 세웠다. 그러나 어쨌든 IOS의 애뮬레이터를 실행 해 보기 위해서는 mac os가 필요하다고 한다. 이런 문제점을 한 방에 해결 해 줄 Expo! 엑스포(Expo)를 설치하면 안드로이드와 IOS를 웹 페이지에서는 물론, 내 휴대폰에서도 Expo go 를 통해 실제 앱으로 돌려볼 수 있다. Expo 설치하기 - 웹 또는 VSCode Visual Studio Code 에서 Expo를 사용하고 싶으면 바로 2번으로 넘어가면 된다! 웹에서 Expo 사용하기 간단한 컴포넌트만 실행시켜보고싶다면, 웹에서 쉽게 돌려볼 수 있다. https://reactnative.dev/docs/components-and-apis .. 2021. 9. 13.

[리액트네이티브]flex ? height ? 레이아웃잡기 총정리 리액트 네이티브 공부 5일차! 컴포넌트와 그 속성들에 대해 간단히 알아보았으니, 이제는 그 컴포넌트들을 배치하기 위해 필요한 스타일 속성들에 대해 알아보는 차례이다. 자바스크립트 스타일 속성과 거의 같다고 보면 되니, 프론트 개발자인 내게도 앱 개발이 한층 더 쉬운 것 같다. JS style, JavaScript style, React style, ReactNative style, 리액트네이티브 스타일 속성, flex, height flex란? 부모컴포넌트의 크기를 기준으로 비율로 나누어 높이/너비를 설정해주는 매우 편리한 옵션이다. 다음의 그림으로 쉽게 확인할 수 있다. 아무런 높이 스타일을 적용하지 않으면 컴포넌트는 필요한 최소 높이만을 가지게 되어 맨 첫번 째 그림처럼 쌓이게 되고, 밑에 빈 공간이.. 2021. 8. 31.

[ReactNative]Google Material Design Color : 패키지 install 계속해서 리액트 네이티브를 공부하는 중이다. 이제 컴포넌트 등 기본적인 요소에 대한 공부를 슬슬 끝마쳤나보다. 컴포넌트 스타일링 챕터를 공부했다! 나는 무언가를 개발하기 전에 무조건 테마를 고르고 시작하는 편인데, 구체적인 레이아웃들 보다는 컬러감, 컬러 조합 등을 많이 찾아본다. 그래서 color picker도 내게는 없어서는 안될 존재이다. 그러다 보니 이번 챕터가 되게 반가웠는데, 그 중에서도 구글 머터리얼 디자인 (Google Material Design)의 가이드라인이 무척 흥미로워 번역과 적용을 함께 해 보려고 한다. Googe Materail Design - https://material.io/design 오늘 살펴볼 것은 이 중에서도 왼쪽 메뉴에 보이는 Color , 색상 가이드 라인이다... 2021. 8. 26.

[ReactNative]컴포넌트 이벤트 속성과 API 이전 글에서 React Native의 사용자 정의 컴포넌트에 대해 알아보았다. 사용자 정의 컴포넌트에 대해서는 이전 글(https://iworldt.tistory.com/38) 을 참고하자! 이번 포스팅에서는 리액트 네이티브의 사용자 컴포넌트, 그리고 그 컴포넌트들에 대한 이벤트를 어떻게 처리하는지에 대해 정리해보도록 하겠다. 리액트 네이티브에서는 사용자 정의 컴포넌트를 통해서 원하는 컴포넌트를 제작할 수 있는데, 그렇게 정의한 컴포넌트의 터치와 제스쳐 이벤트도 얻어 사용할 수 있다. 이 때 도움을 주는 것이 리액트 네이티브의 API이다. 리액트 네이티브 컴포넌트, 컴포넌트 이벤트 처리, 컴포넌트 이벤트 속성, 리액트 네이티브 API 기본적으로 이벤트를 위한 코어 컴포넌트에 대해 몇 가지 알아보자. Al.. 2021. 8. 24.

[ReactNative]함수 컴포넌트 vs 클래스 컴포넌트? 차이점과 비교 리액트 네이티브의 코어 컴포넌트 중 이벤트를 다루지 않는 기본적인 코어 컴포넌트들을 지난 포스팅에서 알아보았다. View, Text, Image등의 기본적인 사용과 HTML 태그와의 비교는 이전 포스팅 (https://iworldt.tistory.com/35)을 참고하면 된다. 이번 포스팅에서는 리액트 네이티브의 사용자 컴포넌트에 대해 알아볼 것이다. 그 중에서도 사용자 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트 두 가지 방식으로 제작할 수 있는데, 그 둘의 차이점을 알아보도록 하겠다. 리액트 네이티브 컴포넌트, 리액트 컴포넌트, 함수 컴포넌트, 클래스 컴포넌트 사용자 컴포넌트 리액트에는 컴포넌트를 클래스 컴포넌트(class component)와 함수 컴포넌트(function component) 두 .. 2021. 8. 24.

[ReactNative] JSX란? HTML vs ReactNative 태그 총정리! 리액트는 JSX 문법을 사용하면서 컴포넌트, 즉 태그들을 구성하며 이루어져 있다. 그래서 HTML과 React, React Native 간 유사한 태그들이 종종 보이는데, 오늘은 그것들을 정리해보는 포스팅을 하겠다! 리액트와 리액트 네이티브 프레임워크의 주력은 바로 JSX라고 할 수 있다. 리액트의 공식 문서에서도 JSX의 사용을 다음과 같이 권하고 있다. React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다. 그러므로 우선 JSX에 대해 간단히 알아보도록 하자! JSX = JavaScript + XML JSX란? J.. 2021. 8. 19.

[ReactNative]맥에서 홈브루(Homebrew), VSCode, Node.js 다운로드 한번에 끝! 리액트 네이티브로 앱을 개발하기 위해 개발환경을 셋팅하는 것 부터 첫 단계를 시작하겠다! 나는 맥으로 개발을 할 예정이다. 환경 셋팅 순서는 다음과 같다. Homebrew 홈브루 설치 VSCode 비주얼 스튜디오 코드 설치 Node.js 설치 코코아팟 설치 워치맨 설치 안드로이드 스튜디오 설치 홈브루(Homebrew)는 맥의 설치프로그램으로 필요한 프로그램마다 찾아 다운받을 필요 없이 홈브루를 통해 터미널에서 쉽게 설치가 가능하다. 1. Homebrew 홈브루 설치 https://brew.sh/ 에 방문하여 다음 명령어를 복사한다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 복.. 2021. 8. 11.

[ReactNative]리액트 네이티브 공부 순서, 책 추천 등 리액트 네이티브를 공부하여 앱 개발을 해보자는 목표를 세웠다! 그래서 리엑트네이티브란? 리액트 네이티브가 무엇인지, 어떻게 공부를 시작하는지, 어떤 앱을 개발할 것인지 등등을 정리해보았다. 리액트 네이티브 (React Native) 자바스크립트로 네이티브 수준의 안드로이드/ios 모바일 앱을 개발하는 크로스플랫폼(cross-platform) 프레임워크이다. 크로스플랫폼은 네이티브 앱보다 실행속도는 비교적 느린 반면, 자바스크립트라는 언어를 사용하는 등 개발 시간과 비용이 상대적으로 적은 장점을 가지고 있다. 리액트 네이티브 개발환경 안드로이드와 iOS를 한번에 개발할 수 있다고 하지만, 운영체제가 맥(Mac)인 경우에 한해 가능한 이야기이다. 소스코드는 어느 운영체제이든 작성할 수 있으나 그를 앱으로 빌.. 2021. 8. 11.

이전 1 다음

728x90

티스토리툴바