ReactNative_앱
-
[React-Native] FlatList style적용 / View 내부 가로 배치/이미지 테두리 둥글게ReactNative_앱 2023. 4. 4. 22:21
FlatList안에는 contentContainerStyle과 style을 둘 다 사용할 수 있다. View에서 자식 요소들을 가로, 세로로 쌓기 위해서 Flex Direction 스타일을 사용합니다. Flex Direction은 row(행), column(열) 속성을 사용할 수 있으며 row가 가로배치, column이 세로배치라고 생각하시면 됩니다. 자식 요소 라는 말에 유의하셔야 합니다. 현재 View에 Flex Direction을 'row'라고 한다면 자식 View들이 가로배치 됩니다. 또한 Flex Direction의 기본속성은 column으로, 여지껏 별도로 명시하지 않았기 때문에 View들이 세로로 쌓이는 모습을 봐왔습니다. 아래의 예를 통해 직접 보겠습니다. import React, {Com..
-
-
Git 기본 공부ReactNative_앱 2023. 3. 29. 16:50
git의 영역 세가지 (1) Working Directory (Local) : 개인 코드 작성 (2) Staging 영역 : git add 를 통해서 수정된 코드를 올리는 영역 (3) Repository : git commit 을 통해서 최종 수정본을 제출 Staging Area :스테이징 영역은 작업 디렉토리와 git 저장고의 변경 이력 사이의 징검다리 역할을 한다. 작업 디렉토리->아직 커밋할 준비가 안 된 변경내용을 자유롭게 수정할 수 있음 스테이징 영역->커밋할 준비가 된 변경 내용이 git ㅓㅈ장소에 기록되기 전에 대가하는 장소 git add를 이용해서 현재 작업 디렉토리에 있는 내용을 스테이징 영역으로 이동시킬 수 있음 git commit 명령어가 변경 이력을 남길 사점에는 작업 디렉토리..
-
React-Native 앱 개발ReactNative_앱 2023. 3. 29. 16:31
react style 문법을 react-native 문법으로 바꾸는 중 margin 0 auto 이건 react에 있던 style.div에 있던 margin 값인데 이 뜻은: margin 0 auto; 에서 0 이 의미하는 것은 위쪽과, 아래쪽의 여백을 0으로 준것이다. 한번에 동일한 크기를 줄때, 한번만 써주는 것입니다.auto는 좌우의 여백을 똑같이 배분한 것입니다. 그래서 브라우저 화면 가운데에 위치하게 됩니다. position :relative css코드인 이거의 의미는: position 속성을 relative로 설정하게 되면, 요소를 원래 위치에서 벗어나게 배치할 수 있게 됩니다. 요소를 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하시면 이해가 쉬울 것 같은데요 세션때 받..
-
React 강의 정리 6강ReactNative_앱 2023. 3. 15. 16:32
onclick을 통해서 누르면 알림창을 띄울 수 있음 우리도 이제 이벤트를 처리할 수 있도록 하고 싶음 우리가 하고 싶은건 저 header을 클릭했을때 e=header라는 경고창이 뜨도록 하고 싶어 App함수 안의 에 아래와 같이 추가하자 props로 onChangeMode라는 함수를 주는거 이제 Header함수를 한번 보자 function Header(props){ return {props.title} } a태그 클릭 했을때 저 함수가 시작되는거 OnClick라는 것을 열고 함수를 실행시킨다. 근데 클릭해도 리로드가 되지 않도록 하고싶어 이때 인자로 적어놓는 event는 이벤트를 실행시킬때 필요한 먼가... 그래서 default를 prevnet하도록 해놓고 props로 온 것 중 onChangeMode..
-
React 강의 정리(5강)ReactNative_앱 2023. 3. 15. 16:06
5강 PROP html 코드는 src나 width 같이 속성을 가지게 됨...우리가 만드는 컴포넌트도 속성을 가지면 좋지 않을까? 리액트는 속성을 prop이라고 함 우리가 만드는 컴포넌트에 어떻게 prop를 장착할까? function Header(){ return React } function App() { return ( ); } export default App; 이렇게 생긴 코드에서 알아서 Header함수에 전달된 값으로 저 React라는 단어가 띄어지면 얼마나 좋을까? function Header(props){ console.log('props',props, props.title); return {props.title} } function App() { return ( ); } 이렇게 쓰면 된다...
-
React 강의 정리 (4강)ReactNative_앱 2023. 3. 14. 20:23
4강 컴포넌트 만들기 사용자 정의 태그 만들기 + 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용합니다. HTML | CSS | JavaScript 태그는 HTML 리스트(list)에 포함되는 아이템(item)을 정의할 때 사용합니다. App.js가 아래와 같아 import logo from './logo.svg'; import './App.css'; function App() { return ( WEB html css js Welcome Hello, WEB ); } 사용자 정의 태그를 컴포넌트라고 함 컴포넌트를 써서 아래와 같이 줄어듬 import logo from './logo.svg'; import './App...