Overview
React Native is a widely used technology, empowered by a massive community of hundreds of thousands of developers and downloaded over 1 million times every week.
React Native는 수십만 명의 개발자로 구성된 대규모 커뮤니티에 의해 권한을 부여받고 매주 100만 번 이상 다운로드되는 널리 사용되는 기술입니다
- 수십만 명의 개발자`: https://github.com/facebook/react-native/stargazers
over 1 million times:
https://www.npmjs.com/package/react-native
In this section you will find listed ways you can also be part of the React Native-related communities, depending on your wants and needs:
이 섹션에서는 당신의 필요와 필요에 따라 React Native 관련 커뮤니티의 일원이 될 수 있는 방법을 찾을 수 있습니다.
We expect all folks participating in React Native' communities to adhere to the guidelines within our Code of Conduct
우리는 React Native 커뮤니티에 참여하는 모든 사람들이 행동 강령 내의 지침을 준수하기를 기대합니다
Learn the Basics
React Native is like React, but it uses native components instead of web components as building blocks.
RN은 리액트와 비슷하지만 빌딩 블록으로써 웹 컴포넌트 대신 네이티브 컴포넌트를 사용합니다.
So to understand the basic structure of a React Native app,
그래서 RN 앱 기본 구조를 이해하기 위해선,
you need to understand some of the basic React concepts, like JSX, components, state, and props.
JSX, 컴포넌트, state, props와 같은 약간의 기본 리액트 개념을 이해할 필요가 있습니다.
If you already know React, you still need to learn some React Native specific stuff, like the native components.
이미 리액트를 알고 계시더라도 네이티브 컴포넌트와 같은 RN의 특정한 개념들을 배울 필요가 여전히 존재합니다.
This tutorial is aimed at all audiences, whether you have React experience or not.
이 튜토리얼은 리액트 경험 유무와 상관없는 모든 인구를 대상으로 합니다.
Let's do this thing.
가보시죵
Hello World
In accordance with the ancient traditions of our people,
우리 민족의 오랜 전통에 따라
we must first build an app that does nothing except say "Hello, world!". Here it is:
우리는 우선 "Hello world!"를 말하는 것 외에 아무것도 허용하지 않는 앱을 만들어야 합니다. 자,
import React from 'react';
import {Text, View} from 'react-native';
const HellodWorldApp = () => {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text> Hello, world!</Text>
</View>
);
};
export default HelloWorldApp;If you are feeling curious, you can play around with sample code directly in the web simulators.
만약 강한 흥미를 느끼신다면, 웹 시뮬레이터에서 직접 샘플 코드를 가지고 놀아보실 수 있으십니다
You can also paste it into your App.js file to create a real app on your local machine.
자신의 로컬 머신 위에 실제 앱을 생성하기 위해 App.js에 붙여넣기도 가능합니다
What's going on here?
무슨 일이 일어나고 있나요?
First of all, we need to import React to be able to use JSX, which will then be transformed to the native components of each platform.
우선 우리는 각 플랫폼의 네이티브 컴포넌트로 변환될 JSX를 사용할 수 있도록 import를 불러올 필요가 있습니다
On line 2, we import the Text and View components from react-native
2번째 라인에서 react-native의 Text와 View 컴포넌트를 불러옵니다
Then we define the HelloWorldApp function, which is a functional component and behaves in the same way as in React for the web.
그럼 컴포넌트 구성요소이면서 웹에서 리액트와 같은 방식으로 동작하는 HelloWorldApp 함수를 정의합니다
This function returns a View component with some styles and a Text as its child.
이 함수는 자식으로서의 몇가지 스타일과 텍스트를 포함하는 View 컴포넌트를 반환합니다
The Text component allows us to render a text, while the View component renders a container.
뷰 컴포넌트가 컨테이너를 렌더링하는 동안 텍스트 컴포넌트는 우리가 텍스트 렌더링을 할 수 있게 해줍니다
This container has several styles applied, let's analyze what each one is doing.
이 컨테이너는 몇 스타일이 적용되어있습니다. 하나씩 무엇을 하는지 확인해보시죠
The first style that we find is flex: 1,
우리가 찾은 첫 번째 스타일은 flex: 1,
the flex prop will define how your items are going to "fill" over the available space along your main axis.
플렉스 prop은 주축을 따라 사용 가능한 공간을 통해 아이템을 어떻게 채울 것인지 정의할겁니다.
Since we only have one container, it will take all the available space of the parent component.
컨테이너가 하나밖에 없기 때문에, 부모 컴포넌트의 사용가능한 모든 공간을 차지하게 될 겁니다
In this case, it is the only component, so it will take all the available screen space.
이 경우 이것은 유일한 컴포넌트입니다. 그래서 사용가능한 모든 공간을 차지하게 될 것입니다..
The following style is justifyContent: "center".
다음 스타일은 justifyContent: "center".
This aligns children of a container in the center of the container's main axis.
이것은 컨테이너의 주축 중앙에 있는 컨테이너의 자식들을 정렬합니다
Finally, we have alignItems: "center", which aligns children of a container in the center of the container's cross axis.
마지막으로, 우리는 컨테이너의 교차 축 중앙에 컨테이너의 자식을 정렬하는 alignItems: "center"가 있습니다.
Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.
이것들 중 일부는 당신에게 자바스크립트가 아닌 것처럼 보일 수 있습니다. 당황하지 마세요. 미래입니다.
First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard,
우선, ES2015(ES6라고도 함)는 현재 공식 표준의 일부인 자바스크립트에 대한 일련의 개선 사항입니다.
but not yet supported by all browsers, so often it isn't used yet in web development.
하지만 아직 모든 브라우저에서 지원되지 않기 때문에, 종종 웹 개발에 아직 사용되지 않습니다.
React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility.
React Native는 ES2015 지원과 함께 제공되므로 호환성에 대한 걱정 없이 사용할 수 있습니다.
import, export, const and from in the example above are all ES2015 features.
위의 예에서 import export, const and 모두 ES2015에서 나온 기능입니다.
If you aren't familiar with ES2015, you can probably pick it up by reading through sample code like this tutorial has.
ES2015에 익숙하지 않다면, 이 튜토리얼과 같은 샘플 코드를 통해 선택할 수 있습니다.
If you want, this page has a good overview of ES2015 features. 원한다면, 이 페이지에는 ES2015 기능에 대한 좋은 개요가 있습니다.
The other unusual thing in this code example is <View><Text>Hello world!</Text></View>
이 코드 예시의 또 다른 특이한 점은 <View><Text>Hello world!</Text></View> 입니다.
This is JSX - a syntax for embedding XML within JavaScript.
이것은 JSX입니다 - 자바스크립트 내에 XML을 삽입하기 위한 구문입니다.
Many frameworks use a specialized templating language which lets you embed code inside markup language.
많은 프레임워크는 마크업 언어에 코드를 삽입할 수 있는 특수 템플릿 언어를 사용합니다.
In React, this is reversed.
이것은 리액트에서 반전되었습니다.
JSX lets you write your markup language inside code.
JSX를 사용하면 코드 안에 마크업 언어를 작성할 수 있습니다.
It looks like HTML on the web, except instead of web things like <div> or <span>, you use React components.
<div> 또는 <span>과 같은 웹 대신 React 컴포넌트들을 사용하는 것을 제외하고는 웹에서 HTML처럼 보입니다.
In this case, <Text> is a Core Component that displays some text and View is like the <div> or <span>
이 경우, <Text>는 일부 텍스트를 표시하는 핵심 구성 요소이며 View는 <div> 또는 <span>과 같습니다.
Components
So this code is defining HelloWorldApp, a new Component.
그래서 이 코드는 새 컴포넌트인 HelloWorldApp을 정의합니다
When you're building a React Native app, you'll be making new components a lot.
React Native 앱을 만들 때, 새로운 구성 요소를 많이 만드시게 될겁니다.
Anything you see on the screen is some sort of component.
화면에 보이는 것들은 일종의 컴포넌트들입니다
Props
Most components can be customized when they are created, with different parameters.
대부분의 구성 요소는 다른 매개 변수와 생성될 때 사용자 정의가 가능합니다
These creation parameters are called props.
이러한 생성자 파라미터는 props라고 불립니다.
Your own components can also use props.
당신의 컴포넌트도 props를 사용할 수 있습니다.
This lets you make a single component that is used in many different places in your app, with slightly different properties in each place.
이를 통해 각 영역마다 살짝 다른 프로퍼티로 앱의 다양한 장소에서 사용되는 단일 컴포넌트를 만들 수 있습니다.
Refer to props.YOUR_PROP_NAME in your functional components or this.props.YOUR_PROP_NAME in your class components.
기능 구성 요소의 props.YOUR_PROP_NAME 또는 클래스 구성 요소의 this.props.YOUR_PROP_NAME을 참조하세요
Here's an example:
import React from 'react';
import {Text, View, StyleSheet} from 'react-native';
const styles = StyleSheet.create({
center: {
alignItems: 'center',
},
});
const Greeting = props => {
return (
<View Style={styles.center}>
<Text> props = {props.name}!</Text>
</View>
);
};
const LotsOfGreetings = () => {
return (
<View style={[styles.center, {top: 50}]}>
<Greeting name="hello" />
<Greeting name="have a nice day" />
<Greeting name="please, some cash?" />
);
};
export default LotsOfGreetings;Using name as a prop lets us customize the Greeting component,
이름을 소품으로 사용하면 Greeting 컴포넌트를 사용자 정의할 수 있습니다,
so we can reuse that component for each of our greetings.
그래서 우리는 각각의 Greeting에 그 컴포넌트를 재사용할 수 있습니다.
This example also uses the Greeting component in JSX.
이 예제는 또한 JSX의 Greeting 컴포넌트를 사용합니다.
The power to do this is what makes React so cool.
이것은 React를 매우 멋지게 만드는 힘이 있습니다.
The other new thing going on here is the View component.
여기서 일어나는 또 다른 새로운 일은 뷰 컴포넌트입니다.
A View is useful as a container for other components, to help control style and layout.
뷰는 스타일과 레이아웃을 제어하는 데 도움이 되는 다른 구성 요소의 컨테이너로 유용합니다.
With props and the basic Text, Image, and View components, you can build a wide variety of static screens.
props과 기본 텍스트, 이미지 및 뷰 컴포넌트를 사용하면 다양한 정적 화면을 만들 수 있습니다.
To learn how to make your app change over time, you need to learn about State.
시간이 지남에 따라 앱을 바꾸는 방법을 배우려면, State에 대해 배워야 합니다.
State
Unlike props that are read-only and should not be modified,
read-only이고 수정해서는 안 되는 props와는 달리,
the state allows React components to change their output over time in response to user actions, network responses and anything else.
이 상태는 React 구성 요소가 사용자 작업, 네트워크 응답 및 기타 모든 것에 대응하여 시간이 지남에 따라 출력을 변경할 수 있게 해준다.
What's the difference between state and props in React?
React에서 state와 props의 차이점은 무엇일까요?
In a React component, the props are the variables that we pass from a parent component to a child component.
React 컴포넌트에서 props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 변수입니다.
Similarly, the state are also variables,
마찬가지로, state는 변수이기도 하면서
with the difference that they are not passed as parameters,
그것들이 매개 변수로 전달되지 않는다는 차이점을 함께 보유합니다.
but rather that the component initializes and manages them internally.
오히려 그 컴포넌트는 내부적으로 그것들을 초기화하고 관리합니다.
Are there differences between React and React Native to handle the state?
state를 처리하기 위해 React와 React Native 사이에 차이가 있을까요?
// ReactJS Counter Example using Hooks!
import React, {useState} from 'react';
const App = () => {
const [count, setCount] = useState(0);
return (
<div className="container">
<p>You clicked {count} times</p>
<button
onClick={() => setCount(count + 1)}>
Click me!
</button>
</div>
);
};
// CSS
.container {
display: flex;
justify-content: center;
align-items: center;
}// React Native Counter Example using Hooks!
import React, {useState} from 'react';
import {View, Text, Button, StyleSheet} from 'react-native';
const App = () => {
const [count, setCount] = useState(0);
return (
<View style={styles.container}>
<Text>You clicked {count} times</Text>
<Button
onPress={() => setCount(count + 1)}
title="Click me!"
/>
</View>
);
};
// React Native Styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});As shown above, there is no difference in handling the state between React and React Native.
위에서 볼 수 있듯이, React와 React Native 사이의 state를 처리하는 데는 차이가 없습니다.
You can use the state of your components both in classes and in functional components using hooks!
hooks를 사용하여 클래스와 기능 컴포넌트들 모두에서 구성 요소의 state를 사용할 수 있습니다!
In the following example we will show the same above counter example using classes.
예제에서 우리는 클래스를 사용하여 위의 카운터 예제와 같은 것을 보여드리죠
import React, {Component} from 'react';
import {StyleSheet, TouchableOpacity, Text, View} from 'react-native';
class App extends Component {
state = {
count: 0,
};
onPress = () => {
this.setState({
count: this.state.count +1,
});
};
render() {
return (
<View style={styles.container}>
<TouchableOpacity style={styles.button}
onPress=this.OnPress}>
<Text> Click me </Text>
<TouchableOpacity>
<View>
<Text> You clicked {this.state.count} times </Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
alignItems: 'center',
backgroundCOlor: '#DDDDDD',
padding: 10,
marginBottom: 10,
},
});
export default App; 