React Native Tutorial (JSX, Component, State, Prop)

이 글은 "React Native docs의 tutorial"을 번역한 글입니다.
https://reactnative.dev/docs/tutorial

Learn the Basics · React Native

 

이 글을 통해 얻는 것

• 기본 React concept : JSX, Component, State, Prop

 

Tutorial에서 제공하는 HelloWorldApp의 구조 (App.js)

• import (react, react-native)
  1. react
     - JSX를 사용하기 위함
     - 각 플랫폼의 native component로 변경(transform)될 예정
  2. react-native
     - Text와 View component 사용 목적
• const HelloWorldApp()
  • View를 return
  • View에는 style이 정의됨
    - flex
    - justifyContent
    - alignItems
  • View 아래에 Text를 child로 가짐
    - Hello, world! 가 적혀있음
  • HelloWorldApp 함수는 functional component로, web용 React와 같은 방식으로 동작
    1. Text
       - 텍스트를 렌더링하는 component
    2. View
       - container를 랜더링하는 component
    3. View에 적용된 style 살펴보기
       - flex : 1
       이 prop은 main axis에서 사용할 수 있는 공간 중 얼마나 이 item을 채울 것(fill)인지를 나타냄. 예제에서 1개의 container 뿐이므로, parent component의 모든 사용 가능 공간을 사용하며 모든 screen 공간을 사용함
       - justifyContent : "center"
       위/아래 기준의 위치, container의 main axis의 중심에 container의 child들을 정렬
       - alignItems : "center"
       왼/오 기준 위치, container의 cross axis의 중심에 child들을 정렬
• export default HelloWorldApp;
  - 기본으로 실행될 conponent 지정

ES2015 (ES6)

- 이에 관해 살펴보는 것도 JS 공부에 도움이 될듯?

• 개선된 JavaScript
• 현재 공식적으로 JS의 일부가 되었으나, 아직 web 개발에서 사용되지 않는 경우가 종종 있음
• React Native에는 적용되어있음
• 위 예제(HelloWorldApp)에서 ES6의 feature들 : import, export, const, from

JSX

• JavaScript 내에 내장된 XML의 syntax (XML syntax를 JS 코드 내에 내장시킬 수 있다는 의미로 해석)
• (참고) Markup Language (마크업 언어)
  - 가시적으로 구별이 되도록 annotating하기위한 시스템
• 보통 많은 framework에서는 마크업 언어 내에 코드를 내장시킬 수 있는 specialized templating language를 사용
• 그러나 React에서는 뒤바뀌어, JSX가 코드 내에서 마크업 언으를 사용할 수 있도록 해줌
• 이는 <div>, <span>등 web의 것을 사용하는 대신, react component를 사용한다는 점을 제외하고 HTML과 비슷함
• 위 예제(HelloWorldApp)에서 <Text>는 text를 출력하기 위한 core component (즉, React에서 제공하는 component를 사용한다는 것)

Component

• 위 예제(HelloWorldApp)에서는 HelloWorldApp()을 정의하여 새로운 component를 생성
• React Native 앱을 만들면서 새로운 component들을 많이 만들게 될 것
• Screen에 보이는 모든 것들이 component의 일종임

Prop

- Property를 의미하는 듯?

• 대부분 component들은 생성될 때 parameter들을 활용하여 customize할 수 있음
• 이렇게 생성될 때 사용하는 parameter들을 prop이라고 함
• 내가 생성한 component도 prop을 사용할 수 있음
• prop으로 인해 내 app에서 여기저기 많이 사용되는, 그러나 그 때마다 아주 근소하게 다른 특성을 포함할 때, 단 하나의 component로 이를 구현할 수 있음
• (참고) 약간 component의 prop을 사용한다 = 함수의 arg를 사용한다 이런 뉘앙스인듯
• (참고) (Hello Props 중) Greeting을 component로 정의하고, <Greeting ~ />로 사용하는 것이 신선함
• View container는 style이나 layout을 조절하기 위해 다른 component에 유용한 container임
• Basic component인 Text, Image, View component와 prop으로 매우 다양한 적정 screen을 만들 수 있음
• 동적인 app을 만들기 위해서는 state가 필요함

State

• prop은 read only이고 수정이 불가능
• 이에 반해 state는 react component가 user action, network response 등등으로 인해 output을 변경할 수 있게 해줌
• React component에서 prop은 parent component에서 child component로 전달하는 변수(variable)임
• state도 변수지만, parameter로 전달되지 않고 component가 내부적으로 초기화하고 관리
• (참고) 예제에서 const [ count, setCount ] = useState(0)의 의미
  • count는 0으로 초기화된 변수
  • count의 상태 변화를 위해 setCounter로 접근해야함
  • https://stackoverflow.com/questions/53165945/what-is-usestate-in-react

What is useState() in React?