본문 바로가기

리액트네이티브6

[리액트네이티브]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]함수 컴포넌트 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

티스토리툴바