참고

읽지 않으면 문제가 생겨요: 네이버 소셜로그인 과정

컴포넌트 라이프 스타일

---

1. 리액트 네이티브로 시작하기

리액트 기본 클래스

컴포넌트

• 앱 실행시 진입점
• 다른 컴포넌트들의 구성으로 이루어짐
• 컴포넌트들은 또다시 여러 컴포넌트가 필요한 구성의 반복적인 형태

리액트 컴포넌트

• 상태를 유지하는 stateful
• 상태를 유지하지 않는 stateless라는 두가지 컴포넌트

ES6 클래스 사용한 stateful 컴포넌트

class HelloWorld extends React.Component {
	constructor() {
		super()
		this.state = { name: 'jooheyong' }
	}

	render () {
		return (
			<SomeComponent />
		)
	}
}

stateless

const HelloWorld = () => (
	<SomeComponent />
)

• stateless 컴포넌트는 생명주기 메서드에 연결되지 않고 고유한 상태state를 유지하지 않음
• 화면에 보여지는 모든 데이터를 props(속성)으로 받아야함

---

기본 리액트 네이티브 클래스 만들기

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

class HelloWorld extends React.Component {
  	// 생성자에서 name이란 prpos를 state로 지정
	constructor () {
		this.state = {
			name: 'react native in action'
		}
	}

// 라이프사이클에서 최종 실행 역할
componentDidMount () {
	// 마운팅 : 컴포넌트 생성, 생명주기 시작, 생명주기 메서드를 작동
	console.log('mounted..')
}

render () {
	return (
	<View style={styles.continer}>
		<Text>{this.state.name}</Text>
	</View>
	)
	}
}

const styles = StyleSheet.create({
	container: {
		marginTop: 100,
		flex: 1
	}
})

---

컴포넌트로 생각하기

• 표현 가능한 범위로 UI를 머릿 속에서 나누어야함

• UI에서 공통 요소들을 재사용 가능한 컴포넌트로 나누고 그에 따라 해당 인터페이스 정의하면 나중에 재사용 가능

• UI 요소들을 재사용 가능한 컴포넌트들로 나누며 코드 재사용에 유리함

• 코드를 선언적으로 이해하기 쉽게 만들 수 있음

<Header />
<TabBar />
<ProjectList />
<Fotter />

TabBar:
	<TabBarItem />
	<TabBarItem />
	<TabBarItem />
ProjectList:
	<Project />

• 리액트 네이티브는 MVC와 다르게 단방향 흐름 선택
• 최상위 컴포넌트 -> 아래 방향으로 흐르는 워터풀 느낌

data -> home -> brower -> category -> subcategory -> subcategory item..

• 데이터는 최상위 컴포넌트로 전달
• 자식 컴포넌트는 props로 데이터 전달받고 최상위 데이터가 변경되면 자식 컴포넌트는 새 컴포넌트 전달받음

• 페북이 리액트 네이티브 선택한 이유중 하나는 네이티브 개발도구들을 사용하면서 생기는 너무 긴 컴파인 시간을 줄이기 위함
• 작은 UI 변경 등에도 결과 화면 포기 위해 컴파일 오래 기다려야 했음
• 생산성 저하 개발자 비용 증가 해결을 위해 웹 로딩 시간을 단축하고 크롬과 사파리 도구 제공하여 해결
• 웹과 같은 디버깅 경험을 개발자에게 제공

핫 리로딩.. 생략

---

컴포넌트는 일반적으로 JSX를 사용해 구성하지만 js 사용해 구성하기도함

HelloWorld를 보여주는 <MyComponent /> 만들기

• 사용자 정의 컴포넌트 만들면서 기본 제공 컴포넌트인 View와 Text를 요소로 사용
• View 컴포넌트는 HTML의 <div>, Text는 <span>

일관된 컴포넌트 생성 방식

const React = require('react')
cont ReactNative = require('react-native')
const { View, Text } = ReactNative

const MyComponent = React.createClass({
	render() {
		return (
			<View>
				<Text> Hello World</Text>
			</View>)
	}
})

stateful 컴포넌트

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

class MyComponent extends React.Component {
	render() {
		return (
			<View>
				<Text> Hello World</Text>
			</View>)
	}

}

단점

• RN에서 사용할 수 없는 네이티브 고유 기능이 필요할 때 네이티브 코드를 탐색해 직접 코드 작성해야함

• 아니면 누군가 고용

• 아니면 관령 기능 포기

• 리액트 다루어보지 않았다면 완전히 새로운 기술 습득해야함

• 리액트와 리액트 네이티브를 배우면서 개발자는 Xcode와 안드로이드 개발 환경에도 익숙해져야 사용 가능

-RN은 기존 플랫폼 API에 하나의 추상화된 계층을 이용하는 형태
네이티브 새버전이 나오면 새로운 기능 지원 못하기도 함

• 새로운 API를 직접 연결해서 구현하거나
  새로 배포되어 동일한 기능이 구현될 때까지 기다려야함

메모
Text -> span
View -> div
Touchable hightlight -> button

---

네이티브 컴포넌트

기본 제공되는 네이티브 컴포넌트 View, Text, Image

마크업을 사용해 button 컴포넌트 만드는 예시

import { Text, TouchableHighLight } from 'react-native'
const Button = () => (
	<TouchableHighlight>
		<Text> Hello World </Text>
	</TouchableHighlight>
)

export default Button

버튼 가져와 사용하기

import React from 'react'
import { Text, View } from 'react-native'
import Button from './components/Button'

const Home = () => (
	<View>
		<Text> Welcome to the Hello World Button! </Text>
	</View>
)

여기까지 컴포넌트 작업흐름과 적용 방식에 대한 소개였음

---

컴포넌트 사용히 대표적인 사례와 디자인 패턴

구성

일반적으로 JSX 사용 but js도 사용

사용자 정의 컴포넌트 만들면서 기본 제공 컴포넌트 요소 (View, Text) 사용하게됨

레거시에서 보이는 ES5 사용한 방법

const React = require('react')
const ReactNative = require('react-native')
const { View, Text } = ReactNative

const MyComponet = React.createClass({
	render() {
		return (
			<View>
				<Text> Hello World </Text>
			</View>
		)
	}
})

stateful 컴포넌트 (RN 커뮤니티와 개발자들이 추천)

const React = require('react')
import React from 'react'
import { View, Text } from 'react-native'

const MyComponet extends React.Component {
	render() {
		return (
			<View>
				<Text> Hello World </Text>
			</View>
		)
	}
}

외부로 export 가능한 컴포넌트

좀 더 깊게 리액트 컴포넌트 구현하는 방법

// import를 이용해 리액트 네이티브 변수 선언
import React, { Component } from 'react'
import {
	Text,
	View
} from 'react-native'

// 컴포넌트 선언
class Home extends Component {
	// 컴포넌트 코드 실행
	render() {
		// 화면 다시 렌더링될 때 반환
		return (
			<View>
				<Text> Hello from Home</Text>
			</View>)
		)
	}
}

• import 구문 사용으로 다른 모듈이나 파일 스크립트에서 내보내진 함수와 객체, 변수 가져옴
• React.Component -> Component로만 선언, 객체 구조 분해 할당(비구조화) 이용한 처리로 간소화
• render 메서드 호출 시 반드시 하나의 자식요소 반환
  - render 함수 외부 변수 함수 이 위치에서 실행 가능
  - 연산이 필요한 경우 state나 props를 사용해 변수 선언 또는 컴포넌트의 state를 조작하지 못하는 함수 실행 -> render 와 return 문 사이에서 처리 가능

---

Exports

컴포넌트를 내보내서 앱 다른 곳에서 사용할 수 있게 함
export default Home

컴포넌트 조립하기

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

class Home extends Component {
	render() {
		return (
			<View>
			</View>
)
	}
}

같은 파일 Home 클래스 선언 아래 Header 컴포넌트 생성

class Header extends Component {
	render() {
		return <View>
			<Text>Header</Text>
			</View>
	}
}

Header 컴포넌트를 statelss로 작성하는 방법

const Header = () => (
	<View>
		<Text>Header</Text>
	</View>
)

Header 컴포넌트를 Home 컴포넌트에 넣기

class Home extends Component {
	render() {
		return (
			<View>
				<Header />
			</View>
		)
	}
}
`
Footer 컴포넌트와 Main 뷰 생성

```javascript
const Footer = () =. (
	<View>
		<Text>Footer</Text>
	</View>
)

이것들을 앱에 넣기

class Home extends Component {
	render() {
		return (
			<View>
				<Header />
				<Main />
				<Footer />
			</View>
		)
	}
}
```javascript

- 상당히 선언적인 코드
- 어떤 것을 하려는지 알아보기 쉽단 의미

지금까지 RN에서 컴포넌트와 뷰를 만드는 방법에 대한 간단한 설명
기본 작동 방식에 대한 개념 잡아야함