1. How Difference is React-native from ReactJS?
Usage Scope (사용 범위)
- ReactJS : React는 웹 어플리케이션 구축을 위한 반응형 사용자 인터페이스를 구축하는 자바스크립트 라이브러리이다.
- React Native : 네이티브 모바일 어플리케이션을 만들기 위한 프레임워크이다.
Syntax (구문)
React와 React Native는 모두 JSX(JavaScript XML) 구문을 사용한다.
- React는
<div> <h1> <p>등과 같은 html 태그를 사용한다. - React Native는
<View> <Text>등을 사용한다.
Animation and Gestures (애니메이션과 제스처)
- React : CSS 애니메이션을 대규모로 사용하여 웹 페이지 애니메이션을 구현한다.
- React Native : React Native에서 제공하는 Animated API를 사용하여 구성요소에 애니메이션을 적용한다.
Routing Mechanism (라우팅 메커니즘)
- React : 라우팅을 위해 react-router를 사용한다.
- React Native : 라우팅 기능이 내장되어 있지 않지만 React Native에는 어플리케이션 탐색을 위한 Navigator 라이브러리가 내장되어 있다.
| ReactJS | React Native |
|---|---|
| 웹 어플리케이션 개발에 사용 | 모바일 어플리케이션 개발에 사용 |
| 탐색을 위해 react-router를 사용 | 탐색을 위한 Navigator 라이브러리 내장 |
| HTML 태그를 사용 | HTML 태그를 사용하지 않음 |
| 높은 보안성 | ReactJS에 비해 낮은 보안성 |
| 가상 DOM은 브라우저 코드를 렌더링 | Native는 API를 사용하여 코드를 렌더링 |
2. What is Flexbox and describe any elaborate on its most used properties?
- 요소가 컨테이너 내에서 공간을 정렬하고 분배할 수 있도록 하는 레이아웃 모델이다.
- 유연한 너비와 높이를 사용할 때 Flexbox를 사용하면 기본 컨터이너 내부의 모든 요소를 정렬하여 공간을 채우거나 요소 사이의 공간을 분산할 수 있으므로 반응형 디자인 시스템에 사용하기에 좋은 도구이다.
3. Describe advantages of using React Native?
Large Community (대규모 커뮤니티)
- React Native는 오픈소스 프레임워크이다.
Reusability (재사용성)
- 한 번의 코드 작성으로 Android와 iOS 모두에서 사용할 수 있기 때문에 별도의 팀이 필요하지 않고, 대규모의 복잡한 응용 프로그램을 유지 관리하고 디버깅하는데 도움이 되며 비용도 크게 절감할 수 있다.
Live Reloading, Hot Reloading (라이브 리로딩, 핫 리로딩)
- Live Reloading : 파일이 변경될 때 전체 앱을 다시 로드하거나 새로 고침한다.
- Hot Reloading : 앱의 상태를 잃지 않고, 변경된 파일만 새로 고침한다.
Additional Third-Party Plugins (제 3자 플러그인 추가)
- 기존 모듈이 React Native의 비즈니스 요구 사항을 충족하지 않는 경우 개발 프로세스 속도를 높이는데 도움이 될 수 있는 타사 플러그인을 사용할 수 있다.
4. What are threads in General? and explain different threads in React Native with Use of Each?
프로그램 내에서 단일 순차 제어 흐름은 스레드에 의해 제어될 수 있다.
- React Native right now uses 3 threads :
- MAIN/UI Thread : Android/iOS 앱이 실행되는 기본 어플리케이션 스레드이다.
- Shadow Thread : React Native에서 React 라이브러리를 사용하여 생성된 레이아웃은 이것으로 계산할 수 있으며 백그라운드 스레드이다.
- JavaScript Thread : 기본 JavaScript 코드는 이 스레드에서 실행한다.
5. Are default props available in React Native and if yes for what are they used and how are they used?
- React의 경우와 마찬가지로 React Native에서 default props를 사용할 수 있다. 예를들어 props 값을 전달하지 않으면 구성 요소는 default props 값을 사용한다.
6. How is user input handled in React Native?
- TextInput은 사용자가 텍스트를 입력할 수 있는 핵심 컴포넌트이다.
- onChangeText prop : 텍스트가 변경될 때마다 호출되는 함수이다.
- onSubmitEditing prop : 텍스트가 전송될 때 호출되는 함수이다.
import React, { useState } from 'react';
import { Text, TextInput, View } from 'react-native';
const PizzaTranslator = () => {
const [text, setText] = useState('');
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={text => setText(text)}
defaultValue={text}
/>
<Text style={{padding: 10, fontSize: 42}}>
{text.split(' ').map((word) => word && '🍕').join(' ')}
</Text>
</View>
);
}
export default PizzaTranslator;7. What is State and how is it used in React Native?
- 컴포넌트를 제어하는데 사용한다.
- 변수 데이터는 state에 저장할 수 있다.
- state의 값은 언제든지 변경할 수 있다.
import React, {Component} from 'react';
import { Text, View } from 'react-native';
export default class App extends Component {
state = {
myState: 'State of Text Component'
}
updateState = () => this.setState({myState: 'The state is updated'})
render() {
return (
<View>
<Text onPress={this.updateState}> {this.state.myState}</Text>
</View>
);
}
}💥다시 공부
8. What is Redux in React Native and give important components of Redux uesd in React Native app?
- Redux는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너이다.
- 다양한 환경에서 실행되는 어플리케이션을 작성하는데 도움이 된다.
- 이는 앱의 전체 데이터 흐름이 이전 상태를 유지하면서 단일 컨테이너 내에서 처리되는 것을 의미한다.
Actions
- Actions는 어플리케이션에서 'Store'로 데이터를 전송하는 정보의 'payload'이다.
- Actions는 'Store'에 대한 유일한 정보 소스이다.
- 상태 변경이 필요한 경우 필요한 변경이 작업을 통해 전달된다.
Reducers
- “액션은 어떤 일이 발생했다는 사실을 설명하지만 응답으로 애플리케이션의 상태가 어떻게 변경되는지는 지정하지 않습니다. 이것이 감속기의 역할입니다.” 상태 변경을 위해 작업이 전달되면 상태에 필요한 변경을 수행하고 애플리케이션의 새 상태를 반환하는 감속기의 의무가 있다.
Store
- Store는 어플리케이션의 전체 상태를 유지하는 'Reducers'의 도움으로 생성될 수 있다. 권장되는 방법은 단일 스토어만 있는 redux 사용을 위반하는 여러 스토어를 갖는 것보다 애플리케이션 전체에 대해 단일 스토어를 사용하는 것입니다.
Components
- 어플리케이션의 UI가 유지되는 곳
Ref. Interviewbit
기술블로그