개발새발 개발개발

9-1 Layout DirectionLayout Directiondms 계층 구조에서 자식요소와 텍스트가 배치되어야 하는 방향을 지정한다.레이아웃의 방향은 양끝을 나타내는 start와 end를 통해 나타내는데 기본적으로 React Native는 LTR 레이아웃 방향으로 되어있다. LTR 모드에서는 start는 왼쪽 끝을 의미하고 end는 오른쪽 끝을 의미한다. LTR(default) : 텍스트와 자식 요소들이 왼쪽에서 오른쪽으로 배치된다. margin과 padding 속성도 왼쪽에 적용이 된다.RTL : 텍스트와 자식 요소들이 오른쪽에서 왼쪽으로 배치된다. margin과 padding 속성도 오른쪽에서 왼쪽으로 적용이 된다. 9-2 justifyContent자식 컴포넌트를 부모 컴포넌트 flexDirec..

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: ..

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을 통해 설치한 모듈들이 이곳에 위치한다.모듈을 찾지 못하는 에러가 발생하면 ..

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..

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..

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

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..

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..

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..