이전 포스트
이전 포스트에 이어 구현에 대해 설명하겠습니다.
구현
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)
'React Native' 카테고리의 다른 글
React Native - 에러 조치 (0) | 2021.04.23 |
---|---|
React Native 시작 - 기본 구성(1) (0) | 2021.04.22 |
React Native 개발환경 셋팅(2) (0) | 2021.04.22 |
React Native 개발환경 셋팅(1) (0) | 2021.04.21 |