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

이전 포스트

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

 

이전 포스트에 이어 구현에 대해 설명하겠습니다.

 

 

구현

Component를 구현하는 다양한 방법이 존재합니다.

기본적인 방법인 Class Component와 Function Component에 대해 설명하겠습니다.

두 방식은 구현 방식 외에도 다양한 차이가 존재합니다. 

구현 방식에 대해 소개 후, 두 방식이 어떤 점에서 차이가 나고 성능 면에서 어떤 차이를 나타내는지 확인하겠습니다.

 

Class Component

이름 그대로 Class 방식으로 구현된 Component 입니다

 

Code

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

export default class MyComponent extends React.Component {
    state = {
        name:"PCloud"
    }
    constructor({props}) {
        super(props)
    }
	
    shouldComponentUpdate(nextStates, nextProps) {
        if(this.state !== nextState || this.props !== nextProps) {
            return true
        }
        return false
    }
	
    componentDidMount() {
        this.setState({name:"User"})
    }
	
    componentDidUpdate(preProps) {
	
    }
    
    render() {
        const { title } = this.props
        const { name } = this.state
        return (
            <View style={{flex:1}}>
                <Text>{title}</Text>
                <Text>{name}</Text>
            </View>
        )
    }
}

 

Function Component

Function 방식으로 구현된 Component 입니다.

 

Code

import React, { useState, useEffect } from 'react'
import { Text, View } from 'react-native' 
const MyComponent = ({title}) => {
    const [name, setName] = useState('PCloud')
    
    useEffect(()=> {
        this.setName('User')
    })
	
    return (
        <View>
            <Text>{this.title}</Text>
            <Text>{this.name}</Text>
        </View>
    )
}
export default React.Component(MyComponent)

 

두 가지 구현 방식에 대한 차이점

 

State 변경 방식

우선 눈에 띄는 차이는 State를 선언하는 방법입니다.

Class Component는 기존에 설명한 선언과 수정 방법이 동일합니다. 

Function Component의 경우 Hook 함수 라고 불리는 useState 를 사용하고 있습니다.

 

Hook 함수에 대한 것은 차후 다른 포스트에서 설명하겠습니다.

우선 이를 별개로 나누어 설명한 이유는 Class Component 에서는 Hook 함수를 호출할 수 없기 때문입니다.

 

장단점이 존재하겠지만 원하는 방식으로 구현하면 됩니다.

* Function Component 가 성능이 더 좋다 라는 내용은 보았지만 두 가지 모두 필요에 따라 사용하게 될 것이므로

이것만 사용하자! 같은 일은 없습니다.

 

굳이 두 방식에 대해 편함에 대한 차이라면 하위 Component에서 Props의 내용을 수정할 때 차이가 날 것입니다.

 

Class Component라면 Props의 내용을 수정할 수 있는 함수를 만들고 .bind 키워드를 통해 생성된 함수를 전달해야합니다.

 

Function Component라면 useState에서 생성된 set 함수를 전달하는 것으로 해결될 것입니다.

 

Life Cycle의 차이

Life Cycle Function 도 차이가 존재합니다.

Class Component 는 앞서 설명한 didMount 나 didUpdate 가 작성된 것을 확인했을 것 입니다.

Function Component는 useEffect 라는 Hook 함수가 그 자리를 대신하고 있습니다.

useEffect 는 ComponentDidMount 와 ComponentDidUpdate가 합쳐진 방식입니다.

 

즉 React.DOM에 삽입 직후 최초 Rendering과 Rendering 직후 호출됩니다. (업데이트 보장)

물론 최초 Rendering 만 하고 싶거나 특정 State 및 Props의 변화에만 반응하고 싶을 수 있습니다.

 

그럴 경우 다음과 같이 구현할 수 있습니다.

useEffect(()=> {
    this.setName('User')
},
[this.title]) <--- 핵심

이는 Rendering 직후 호출될 때 title이 변경되었는지 확인 후 변경되었다면 호출되는 방식입니다.

만약 Rendering 직후 useEffect의 호출을 원하지 않는다면 이를 [] 이렇게 비워놓아 호출을 방지할 수 있습니다.

 

Rendering

번외의 느낌으로 shoudComponentUpdate를 직접 작성하는 것이 아닌 자동으로 방지하는 방법에 대해 작성했습니다.

 

Class Component

PureComponent는 자동으로 Current State & Props 와 next State Props를 얕은 값 비교합니다.

import React from 'react'

export default class MyComponent extends React.PureComponent {
    ...
}

 

Function Component

memo 또한 동일합니다.

import React from 'react'

const MyComponent = (props) => {
    ...
}
export default React.memo(MyComponent)

 

---

 

PCloud63514 - Overview