728x90
반응형

React Native 96

2. props 다루기

특징 1) props는 부모 컴포넌트로 부터 전달된 속성 값이나, 상속 받은 값이다. 2) 컴포넌트에 상속이 되고나면 props 값은 변경이 불가능 하다. 1. 정적 props // 부모 export default class App extends Component{ render(){ return( // 자식에게 props 로 값 전달. ); } } // page 74 // 자식 class BookDisplay extends Component{ render(){ return( //부모로 부터 전달 받은 값은 자식 컴포넌트에서 this.props.이름 으로 사용 할 수 있다. {this.props.book} {this.props.note} ) } } 2. 동적 props : 외부를 통해서 변하는 속성 // ..

React Native 2020.01.07

stateless 컴포넌트와 stateful 컴포넌트

export default class App extends Component{ render(){ return( ); } } // stateless 컴포넌트 ( 기본적으로 유지하는게 없는 순수한 함수 상태) function test(testValue){ return 테스트1 } // 또는 const test_2 = () =>{ 테스트1 의 다른 방식 } /* alt + shift + a function test2(){ return This is English } */ // stateful 컴포넌트 ( 고유한 상태를 유지하는 컴포넌트 ) class Car extends Component { render() { return This is car; } } 사용예시 export default class App e..

React Native 2020.01.07

윈도우 react native 설치 및 환경

react-native로 앱을 개발하기 위해서는 Nodejs, Python, Android studio등을 설치해야 합니다. 각 단계를 하나씩 하나씩 자세히 살펴 보도록 하겠습니다. Chocolatey 설치 Chocolatey는 윈도우(Windows)에서 필요한 패키지를 설치하고 관리하는 윈도우(Windows)용 패키지 관리자입니다. Chocolatey를 사용하면 윈도우(Windows)에서 간단하게 필요한 패키지를 설치할 수 있습니다. Chocolatey: https://chocolatey.org/ Chocolatey를 설치하기 위해서, 명령 프롬프트(cmd)를 관리자 권한으로 실행하고, 아래에 명령어를 실행합니다. @"%SystemRoot%\System32\WindowsPowerShell\v1.0\po..

React Native 2019.12.31

1. state 다루기 : prop 과 State

Props란? properties의 약어이며, 컴포넌트가 생성될 때, 매개변수로 props가 전달된다. 이렇게 받아온 데이터를 사용하는 것을 말한다. 변동되지 않는 데이터를 다룰 때 사용한다. 부모에 의해 설정되며, 컴포넌트가 살아있는 동안만 유지된다. state와 다르게 props 는 컴포넌트 내에서 갱신되지 않는다. State란? state는 컴포넌트가 다루는 값들의 집합체, 리액트에서는 UI를 state를 다루는 기계장치로 보면된다. setState함수를 사용해 state를 변경하게 되면, 리액트는 컴포넌트를 다시 랜더링 하게 된다. 만약에 자식 컴포넌트가 props에 부모의 state를 받아서 사용하게 된다면, 부모 컴포넌트의 state 값이 변경되면 자식 컴포넌트도 다시 렌더링 된다. 데이터를 ..

React Native 2019.12.30

EXPO) 시뮬레이터로 실행해 보기

5. 웹에 이러한 Bundler 페이지가 뜬다. 시뮬레이터를 실행해보자. 안드로이드 폰은 Expo 앱을 설치후 Scan QR Code 기능으로 위 QR코드(CNNECTION: Tunnel) 인식시키고, 아이폰에은 Expo 앱을 설치후 일반카메라로 QR코드 인식시키면 된다. ​ 나는 가상 mac에서 도저히 안드로이드 시뮬레이터를 실행시킬수없었기때문에 안드로이드는 QR코드를 이용해 공기계로 빌드시켰고, ios는 위 페이지에서 Run on iOS simulator를 클릭했다. 그러면 자동으로 Xnode의 시뮬레이터를 실행시켜준다. ​ ios 시뮬레이터에 Open up App.js to start working on you app! 이라는 문구와함께 깔꼼한 화면(아까 blank선택해서)이뜬다. ​ 6. Visu..

React Native 2019.08.22

EXPO ( windows 환경 설치 ) + QR 코드 인식 이슈

이 글은 Windows(윈도우) 에서 설치하는 방법이다. 1. 직접 스마트폰으로 React-Native를 실행하는 방법 2. Visual Studio Code를 통한 React-Native 프로젝트 개발 3. 안드로이드 스튜디오를 통한 React-Native 실행하는 방법 위 3가지를 다룰 것이다. 기본 React Native 설치하는 방법 2018/11/11 - [Develop/React Native] - React Native 설치 Windows, Android Studio 사용하기. Expo 가 v31.0.0 이 되면서 홈페이지에 XDE설치하는 것이 사라지고 Expo SDK를 설치하는 것이 생겼다. 예전의 강의들을 찾아보면 죄다 XDE를 설치하라고 되어있는데, XDE를 설치하고 싶다면 v29이하에서..

React Native 2019.08.22
728x90
반응형