반응형

React-Native 18

8.React-Native Layout(flex, flexDirection)

8-1 개요 없는 App이 없는 오늘날 같은 시대에서는 디자인이 정말 중요하다. 같은 기능을 하는 App이 2개가 있다면 소비자는 디자인, 효율성, 부가기능들을 따져서 둘중에 하나를 선택할 것이다.React-native를 시작할 때 디자인 쪽을 공부하고 진행을 하면 더욱 빠르게 습득이 가능할 것 같아서 가장 먼저 디자인의 레이아웃 부분을 다룰 것이다. 8-2 Flexflex는 크기를 비율로 설정하는 것이다. —Example1import React from 'react'; import {Text, View, StyleSheet} from 'react-native'; const App = () => { return ( ) } const styles = StyleSheet.create({ container: ..

React-Native 2021.01.27

7. React-Native 튜토리얼

7-1 프로젝트 구조 1. index.js프로젝트를 실행할 때 가장 먼저 실행되는 기점이다.App.js를 가져와서 컴포넌트로 등록한다. 2. app.js실제 디바이스에 표시되는 코드가 App.js에 작성되어 있다. 3. android/안드로이드 네이티브 모듈을 담당하고 있는 부분이다.react-native에서 지원하지 않는 기능들을 사용하기 위해서는 네이티브 모듈을 직접 구현해야 한다. 4. ios/ios 네이티브 모듈을 담당하고 있는 부분이다.react-native에서 지원하지 않는 기능들을 사용하기위해서는 네이티브모듈을 직접 구현해야 한다. 5. node_modules/react-native 프로젝트와 관련된 모듈이다.npm을 통해 설치한 모듈들이 이곳에 위치한다.모듈을 찾지 못하는 에러가 발생하면 ..

React-Native 2021.01.26

6. React-Native 설치(Mac OS)

6-1 React-Native란?React-Native는 페이스북이 개발한 오픈소스 모바일 애플리케이션 프레임워크이다. Android, IOS, Web, UWP용 애플리케이션을 개발하기 위해 사용된다. 6-2 Rn과 ExpoReact-Native 프로젝트를 생성할 때 총 2가지 방법을 제공한다. expo Cli와 react-native Cli가 있는데 이것은 각각의 장점과 단점이 있다. —Expo장점배포하기 편하다.빠르고 간단하게 설치가 가능하다.xCode, Android 스튜디오 없이 본인의 휴대폰으로 테스트 가능하다.단점Java, Kotlin, Objective-C, Swift로 작성이 불가능하다.빌드 파일의 크기가 크다.블루투스 이용불가 —RN장점자기가 원하는 언어로 추가로 작성이 가능하다.(bri..

React-Native 2021.01.26

5. React useContext, useRef, useLayoutEffect, useRuducer

5-1 개요전 시간까지 가장 보편적이고 많이 쓰이는 Hook을 알아보았습니다. 이제는 그 외에 Hook함수들을 공부하면서 React Hook을 마무리 짓는 시간을 갖겠습니다.5-2 useContext()컴포넌트 외부 어딘가에 존재하는 context 객체(React.reactContext)를 받아 그 context의 현재 상태(state)를 변환한다.💡context : App이나 객체의 현재 상태를 나타내주는 역할context의 상태는 useContext Hook을 호출하는 컴포넌트를 감싸고 있는 Provider의 value prop에 의해 결정된다.const value = useContext(MyContext);컴포넌트에서 가장 가까운 Provider가 갱신(렌더링)되면 useContext Hook은 M..

React-Native 2021.01.25

4. React memo(), useCallback()

4-1 목적리액트를 이용해서 개발을 하게되면 가장 중요한 요소 중 하나가 렌더링 호출 시점입니다. 불필요한 렌더링이 발생하게되면 그만큼의 시간이 계속 낭비하게 되고 효율성이 떨어져 사용자에게 불편함을 느끼게 할 수 있습니다. 이 때 불필요한 리렌더링을 방지하기 위해 useCallback과 React.Memo를 사용하게 되는데 언제 어떤식으로 사용하는지 알아보겠습니다. 4-2 ReferenceReact.memo와 useCallback()을 공부하기 전에 참조라는 개념을 알아야 더욱 이해하기 쉽기 때문에 한번 짚고 넘어가겠습니다. pass by reference : 한쪽에 커피를 채우면 다른 한쪽에도 동일한 커피가 채워진다.(얕은 복사)pass by value : 실제로 새로운 컵이 생겨난 것이기 때문에 한..

React-Native 2021.01.25

3. React Hook(1) useState(), useEffect()

3-1 Hook이란?함수형 컴포넌트에서 State와 생명주기(Life Cycle)을 연동(hooking)한 함수입니다.Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있습니다.기존의 class형 컴포넌트도 사용은 가능하지만 가급적으로 새로 만드는 프로젝트는 Hook으로 사용하길 권장하고 있기 때문에 우리는 React, React-Native를 배우기전에 Hook을 공부할 필요가 있습니다. https://levelup.gitconnected.com/an-introduction-to-react-hooks-50281fd961fe 3-2 React Hook을 사용하는 이유기존 React에서는 State와 관련된 로직을 재사용하기 어렵다.로직을 재사용하기 위해 Compon..

React-Native 2021.01.22

2. React Component(리액트 컴포넌트)

2-1 개요컴포넌트는 props를 받아서 UI가 어떻게 보여야하는지 정의하는 React Element를 출력하는 일종의 함수입니다. UI를 구성하기 위해서는 화면에 컴포넌트를 생성하고(Mounting), 업데이트하고(Updating), 지워야(Unmouning)합니다. 아래에서 자세히 다루어 보겠습니다. 2-2 Props와 State컴포넌트는 2가지 인스턴스 속성(property) props와 state를 가지고 있습니다. Props부모 컴포넌트가 자식 컴포넌트에게 주는 값자식 컴포넌트에서는 props를 받아오기만 하고, 받아 온 props를 직접 수정 불가능(읽기전용) State컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다. → 부모컴포넌트로부터 props를 받아서 그 props에 대해 st..

React-Native 2021.01.22

1.React란??

1-1 개요오늘은 React가 무엇인지 중점으로 포스팅을 할 예정입니다.ReactNative를 배우기 전에 React에 대해서 조금 알고 넘어가야하는 부분이 있기때문에 처음에는 React위주로 다루어볼려 합니다. 향후 계획은 ReactNative를 중점적으로 포스팅할 예정이며, React에서는 Component와 Hook위주로 설명하고 넘어가겠습니다.도움이 되시길 바라면서 시작하겠습니다 🙏 1-2 React React는 JavaScript 라이브러리 중 하나로서 사용자 인터페이스(UI)를 만들기 위해 사용됩니다.React말고도 Angular, Vue.js 등 다양한 프론트 엔드 프레임워크가 존재하는데 2020년 기준 React가 점유율이 가장 높습니다. https://www.lambdatest.com/b..

React-Native 2021.01.21
반응형