React Native 시작 - 기본 구성(1)

이전 포스트

React Native 개발환경 셋팅(2)

 

React Native는 Android와 IOS의 네이티브 앱 개발을 하나의 프로젝트를 할 수 있다는 특징이 있습니다.

이는 프로젝트 진행 시 개발 생산성을 높히는데 큰 기여를 하게 됩니다.

 

기본적으로 한번 코드를 작성해도 동시에 두 가지 결과물이 나온다는 장점이 있으며,

Android 개발자와 IOS 개발자가 일정을 맞추는 등의 행동이 필요없게 됩니다.

* 단 Windows 환경에서 개발한다면 가상머신을 실행하지 않고선 IOS앱을 만나기는 어려울 것입니다.

 

물론 개발 효율을 높힌다는 것은 아주 큰 장점이지만 반대로 숙지하고 있어야하는 내용도 많아진다는 것이 특징입니다.

단점이라 하기엔 알맞은 표현은 아니지만 최소한 숙지해야하는 내용이 아래와 같습니다.

• JS
• CSS
• Android Native (Module 개발 / Build 시)
• IOS Native (Module 개발 / Build 시)

최소한 알고 있어야하는 내용이고, 이후는 React Native의 문법인 JSX를 이해해야 합니다.

물론 하다보면 해결될 문제 입니다.

 

React Docs 를 읽는 것도 좋은 방법입니다.

 

목차

1. Component
   1. LifeCycle - State & Props
      1. State & Props
      2. Life Cycle
   2. 구현
      1. Class Component
      2. Function Component
2. Rendering

 

Component

React Native App의 구성 요소를 의미합니다.

View, Text, Image 등을 칭하기도 하고, 이 Component를 조합하여 하나의 Component를 만드는 등 다양한 작업을 하게 됩니다.

 

예시로는 Label과 Text를 하나로 묶은 새로운 Component를 만든다 던지..

 

Debug를 통해 확인할 수 있는 사항은 모든 Component는 JSX.Element를 상속받고 있습니다.

Android와 IOS를 동시에 지원하는 Basic Components가 있는 반면,각 플랫폼을 동시에 지원하지 않는 Components도 존재합니다. Core Components and APIs · React Native 링크에서 개발에 필요한 Components가 각 플랫폼을 지원하는지 확인해주세요.

 

LifeCycle - State & Props

Component를 설명하는 과정에서 이 두 가지를 제외하고 설명하는 것이 불가능합니다.

필수적으로 인지를 하고 넘어가야 하므로 간단하게 설명하겠습니다.

 

State

Component가 갖는 속성입니다.

...
class MyComponent extends React.Component {
    state = {
        name:'PCloud',
        year:2021
    }
}

 

예제만 보면 Member Field와 무슨 차이가 있는가? 라는 질문이 생길 수 있습니다.

State 자체가 Member Field에 속하는건 맞지만, 좀 더 상세히는 Rendering에 밀접한 관련이 있습니다.

 

Why?

우선 state를 왜 사용하는 것일까요?

단순히 Member Field라 생각한다면 굳이 Object 형식으로 묶고 state라는 변수를 사용할 필요가 없을 것 입니다.

 

가정

화면을 하나 만든다고 가정합시다.

간단한 TextInput Component 하나와 Text Component를 놓고,  TextInput의 입력 내용을 Text에 적용하고 싶습니다.

서로 바라보는 값은 textValue 라는 변수 입니다.(state를 사용하지 않았습니다.)

 

자 이 상황에선 로직을 어떻게 구성해야할까요?

 

Text Component는 textValue를 화면에 보여주도록 합니다.

그리고 TextInput의 onChangeText Event에 Callback을 추가해야할 것입니다.

물론 이 Callback은 textValue의 값을 변경시킬 것 입니다.

이를 적용한 코드 입니다.

import React, { Component }  from 'react'
import { Text, Input, View, StyleSheet } from 'react-native'


const styles = StyleSheet.create({
	container: {
    	flex:1,
        justifyContent:'center'
    },
    text: {
    	fontSize:20,
        margin:10
    },
    textInput: {
    	margin:10
    }
})

class MyComponent extends Component {
	textValue = "Hello"
    
    render() {
    	return (
        	<View style={styles.container}>
            	<Text style={styles.text}>{this.textValue}</Text>
                <Input
                	style={styles.textInput}
                	onChangeText={(text)=> {
                    	this.textValue = text
                    }}
                />
            </View>
        )
    }

}

 

이 코드의 동작에 대한 결과는 Input의 내용이 변하더라도, Text의 내용은 변하지 않는다는 것 입니다.

 

state를 적용하지 않은 Member Field를 get / set 을 할 경우 Rendering Event가 발생하지 않습니다.

 

즉 값은 변했지만 화면엔 적용되지 않는 문제가 발생합니다. 핵심은 값은 변했다는 것 입니다.

Rendering Event 에 대해 아래에 설명하겠지만 결국 state를 적용하지 않으면 원하는 때에 원하는 화면을 보여줄 수 없다는 것입니다.

 

또한 state의 값을 수정할 때 this.state.textValue = "Hello" 와 같이 일반적인 방법이 아닌

setState({textValue:"Hello"}) 와 같이 setState를 호출해야 Rendering Event가 발생합니다.

 

* 즉 편법으로 setState({}) 만 호출해도 Rendering Event를 발생시킬 수 있습니다.

 

Props

상위 Component로 부터 전달받은 속성입니다.

State와 뚜렷한 차이점은 수정이 불가능하다는 점입니다.

당초 React의 경우 단방향 방식의 MVC 모델을 표현한 모습이기 때문에 하위 컴포넌트가 상위 컴포넌트의 값을 수정하는 등의 행동이 맞지 않습니다.

물론 수정하는 방법이 존재하기는 합니다.

전달받은 Props는 ReadOnly 이므로 상위 컴포넌트에서 속성을 수정할 수 있는 Function을 bind 하여 전달하는 방법이 있습니다. (이는 추후 설명합니다.)

 

Life Cycle

Constructor(props) (생성자) 함수 호출로 Component는 시작됩니다.

이 단계에서 상위 Component가 전달한 Props를 확인할 수 있고, 초기 State를 설정할 수 있습니다.

단 사용자가 직접 new 키워드를 사용해서 생성하는 것이 아닌 React.DOM에 Mount 전 호출됩니다.

componentDidMount React.DOM에 Mount 되었을 때 호출됩니다. 즉 첫 Rendering 과정 입니다.

Component가 동작하기 위한 리소스를 불러오는 곳으로 쓰입니다.

주로 Network 와 관련된 로직을 호출합니다.

Constructor 와 차이는 React.DOM에 Mount 되어 있는지 유무이며, 보통 화면 크기를 필요로 하는 경우에 React.DOM Mount 유무를 확인합니다.

• state를 변경하여 rendering을 호출할 수 는 있습니다. 단 중복으로 rendering 과정이 생기며 시각적인 확인은 불가능합니다.

componentDidUpdate(preProps)

Component가 Rendering 과정 이후 호출되는 함수 입니다.

Rendering 이전의 Props를 전달받을 수 있으며, 이 함수에서도 State 변경을 통한 Rendering 과정을 유도할 수 있습니다.

• 이럴 경우 무한히 Rendering이 발생할 수 있으므로 조건을 세워 방지해야합니다.

shouldComponentUpdate(nextState, nextProps) return boolean

State 및 Props의 내용에 변화가 생겼을 경우 호출됩니다.

이 함수의 목표는 변경된 내용을 확인하여 Rendering을 할지에 대해 결정하는 것입니다.

보통 Current State&Props 와 nextState&Props 를 얕은 값 비교를 진행하여 서로 다를 경우 Rendering을 하도록 유도합니다.

• true를 반환 시 Rendering을 진행합니다.

 

내용이 길어졌습니다.

구현과 관련된 내용은 다음 포스팅에서 이어가겠습니다.

---

다음 포스트

React Native 시작 - 기본구성(2)

PCloud63514 - Overview