[React Native] 02-3. 컴포넌트와 속성 이해하기

2. 리액트 네이티브 기본 다지기  중 02-3 컴포넌트와 속성 이해하기를 공부해보겠읍니다.

(생각보다 한 부분 챕터의 양이 많아서 이번 글부터 제목을 챕터가 아닌 서브 챕터로 바꾸기로 결정...)

---

faker 외부 패키지 설치하기

 ➡️ 개발에 필요한 가짜 데이터를 만드는 패키지

npm i faker
npm i -D @types/faker

※ npm i faker 로 패키지를 설치할 수 없을 때

faker 패키지 제작자가 패키지를 고의적으로 손상시켜 놓았다고 한다. (자세한 이야기는 모르겠음)

그래서 아래와 같은 코드로 다른 버전의 faker 패키지를 설치하면 된다.

npm i -D faker@5

 

 

src/data/util.ts 파일에 아래와 같이 작성

export const makeArray = (length: number) => new Array(length).fill(null)
export const random = (min: number, max: number): number =>
  Math.round(Math.random() * (max - min)) + min
export const unsplashUrl = (width: number, height: number): string =>
  'https://source.unsplash.com/random/${width}x${height}'
export const avatarUriByName = (name: string) =>
  'https://ui-avatars.com/api/?name=${name.split(" ").join("+")}'

✅ unsplash.com : 특정 크기의 이미지를 제공받는다.

✅ ui-avatars.com : 이름을 지정하면 아바타 이미지를 제공받는다.

 

src/data/faker.ts 파일에 아래와 같이 작성

➡️ faker 패키지의 기능을 사용하여 여러가지를 랜덤하게 생성할 수 있다.

import faker from 'faker'
import * as U from './util'
export const randomId = (): string => faker.datatype.uuid()
export const randomName = (): string => faker.name.findName()
export const randomEmail = (): string => faker.internet.email()
export const randomAvatarUrl = (name?: string): string =>
  U.avatarUriByName(name ?? randomName())
export const randomDate = (): Date => faker.date.recent()
export const randomParagraphs = (count: number = 2): string =>
  U.makeArray(count).map(faker.lorem.paragraph).join('\n')
export const randomImage = (): string =>
  U.unsplashUrl(U.random(800, 800), U.random(800, 1000))

name ?? randomName() 의미 : 연산자 앞의 변숫값(여기에선 name)이 null 이나 undefined 라면 연산자 뒤의 값(여기서는 randomName()) 을 사용하라는 뜻이다.

 

 

※ faker 패키지 등 여러가지 패키지들이 인식이 안되면서 아래와 같은 오류가 뜬다면

모듈 'faker'에 대한 선언 파일을 찾을 수 없습니다. '/Users/parkseyeon/React-Native/ch02/ch02_3/node_modules/faker/index.js'에는 암시적으로 'any' 형식이 포함됩니다.
  해당 항목이 있는 경우 'npm i --save-dev @types/faker'을(를) 시도하거나, 'declare module 'faker';'을(를) 포함하는 새 선언(.d.ts) 파일 추가

✅ d.ts 파일을 만들어서 declare module '모듈명' 을 작성한다. 

 

src/data/createRandomPerson.ts 파일에 아래와 같이 작성

import type {IPerson} from './IPerson'
import * as F from './faker'
import * as U from './util'

export const createRandomPerson = (): IPerson => {
  const name = F.randomName()
  return {
    id= F.randomId()
    createDate: F.randomDate(),
    modifiedDate: new Date,
    name,
    email: F.randomEmail(),
    avatar: F.randomAvatarUrl(name),
    image: F.randomImage(),
    comments: F.randomParagraphs(4),
    counts: {
        comment: U.random(10,100),
        retweet: U.random(10,100),
        heart: U.random(100,1000)
    }
  }
}

 

src/data/index.ts 에 다음과 같이 작성

// src/data 디렉터리의 파일을 사용하는 코드의 import문을 간결하게 하기 위해서 작성

export * from './util'
export * from './faker'
export * from './IPerson'
export * from './createRandomPerson'

 

마지막으로 App.tsx 에는

import React from 'react'
import {SafeAreaView, Text} from 'react-native'
import * as D from './src/data'

const person = D.createRandomPerson()
export default function App() {
  return (
    <SafeAreaView>
      <Text>{JSON.stringify(person, null, 2)}</Text>
    </SafeAreaView>
  )
}

✅ JSON.stringfy() 함수를 이용해 문자열로 변환함 ➡️ JSON.stringfy(JSON 문자열로 변환할 Object, replacer 함수, JSON 문자열의 가독성을 위해 공백을 삽입하는데 사용되는 칸(공백문자 개수))

 

 

사용자 컴포넌트 : User-defined component 

• 함수 컴포넌트(function component) 와 클래스 컴포넌트(class component)가 있다.

 

클래스 컴포넌트 만들기

cd src
mkdir screens
touch screens/ClassComponent.tsx
cd ..

✅ 리액트와 리액트 네이티브에서 클래스 컴포넌트는 반드시 Component 클래스(react 패키지에서 제공)를 상속해야한다. 

 

클래스 컴포넌트 구현

import React, {Component} from 'react'
import {Text} from 'react-native'
import * as D from '../data'

const person = D.createRandomPerson()
export default class ClassComponent extends Component {
  render() {
    return <Text>{JSON.stringify(person, null, 2)}</Text>
  }
}

✅ 컴포넌트 제작 ➡️ 즉 코어 펌포는터를 화면에 렌더링 하는 일

➡️ 그래서 클래스 컴포넌트에는 render 라는 이름의 메서드를 넣어야 한다. 

 

 

ClassComponent.tsx

import React, {Component} from 'react'
import {Text} from 'react-native'
import * as D from '../data'

const person = D.createRandomPerson()
export default class ClassComponent extends Component {
  render() {
    return <Text>{JSON.stringify(person, null, 2)}</Text>
  }
}

 

이렇게 하면 App.tsx 를 더 간단하게 만들 수 있다.

App.tsx 에

import ClassComponent from './src/screens/ClassComponent'

다음과 같이 ClassComponent 를 import 해주면 

<SafeAreaView>
      <Text>{JSON.stringify(person, null, 2)}</Text>
</SafeAreaView>


<SafeAreaView>
      <ClassComponent />
</SafeAreaView>

위의 코드를 아래 코드와 같이 간단하게 만들 수 있다.

 

클래스 컴포넌트 만들기

• 보통 속성이 없는 컴포넌트는 function 키워드를 사용하여 작성하고, 속성이 있다면 화살표 함수로 만든다.

ArrowComponent.tsx

import React from 'react'
import {Text} from 'react-native'
import * as D from '../data'

const person = D.createRandomPerson()
const ArrowComponent = () => {
  return <Text>{JSON.stringify(person, null, 2)}</Text>
}

export default ArrowComponent

✅ 클래스 방식 컴포넌트의 render 메서드 == 함수 방식 컴포넌트의 함수 몸통

 

---

속성이란?

• 클래스의 멤버 변수 (member variable) 을 의미한다.
• 속성은 그 값이 수시로 바뀔 수 있다. ➡️ 리액트와 리액트 네이티브는 바뀐 속성값을 즉각 화면에 반영해야 한다. ( = 재렌더링)

속성의 용도 : 부모 컴포넌트가 자식 컴포넌트 쪽으로 데이터를 전달하고 싶을 때 사용한다.

 

✅ 타입스크립트 컴파일 때만 필요한 타입(타입스크립트 코드가 자바스크립트 코드로 컴파일 되고나면 사라지는 것)은 import type 구문으로 구현한다.

 

 

타입스크립트로 함수 컴포넌트 구현하기

 

src/screens/Person.tsx

import React from 'react'
import type {FC} from 'react'
import * as D from '../data'
import {Text} from 'react-native'

export type PersonProps = {
  person: D.IPerson
}

const Person: FC<PersonProps> = ({person}) => {
  return <Text>{JSON.stringify(person, null, 2)}</Text>
}

export default Person // 내보내기

여기서 문뜩... 내가 화살표 함수에 대해서 잘 모르구나 라는 생각이 들었다.

 

const 변수명 : (매개변수명 = 자료형) => {
              처리구문

    }

 

라고 한다. 위의 코드에 적용해보면 FC<PersonProps> 가 매개변수이며 이의 자료형은 {person} 인 것이다. 

 

 

ScrollView 코어 컴포넌트와 Key 속성

코어 컴포넌트 (Core Component) : React Native App의 구성요소를 뜻하며 재사용이 가능한 가장 작은 단위

 

✅Person 컴포넌트를 ScrollView의 자식 컴포넌트로 만들면 ScrollView가 제공하는 스크롤 기능을 이용해 모든 Person 컴포넌트를 볼 수 있다.

 

ScrollView 를 적용하면 다음과 같다.

import React, {Children, Component} from 'react'
import {SafeAreaView, ScrollView, Text} from 'react-native'
import Person from './src/screens/Person'
import * as D from './src/data'

const people = D.makeArray(100).map(D.createRandomPerson)
export default function App() {
  const children = people.map(person => (
    <Person key={person.id} person={person} />
  ))
  return (
    <SafeAreaView>
      <ScrollView>{children}</ScrollView>
    </SafeAreaView>
  )
}

<Person key={person.id} person={person} /> 에서 key = {person.id} 는 렌더링 속도를 최적화하기 위해 모든 자식 컴포넌트를 구분할 수 있도록 키값을 부여하는 것이다. 

➡️ person.id 는 faker.datatype.uuid() 로 생성한 값이다. (uuid : universally unique identifier)