01. 1강 내용 정리

날짜 : 2023-02-01

Chapter 1 정리

React Native의 장점

• Cross platform
• Resources

Component 란 ? 

block 이라고 이해하면 쉽다. Component는 stateful와 stateless 두가지로 나뉘어진다.

Stateful

상태 유지

class HelloWorld extends React.Component {
  constructor() {
    super()
    this.state = { name : 'Chris'}
  }
  render() {
    return <componentName />
  }
}

Stateless

생명주기 method에 연결 X -> state 유지 X

따라서, 모든 데이터를 속성 (props)로 받아서 디스플레이 한다

-> 주로 이 방식으로 웹페이지를 생성했었다.

const HelloWorld = () => {
  <Component />
}

Example

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

class HelloWorld extends React.Component {
  constructor() {                      // 생성자에서 name 속성을 가진 객체를 state 로 설정
    this.state = {
      name: 'React Native in Action'
    }
  }
  componentDidMount() {               // 라이프사이클에서 최종으로 실행되는 메서드
    console.log('mounted');
  }
  render () {
    return (
     <View style={styles.container}>
       <Text>{this.state.name}</Text>
     </View>
    )
  }
}

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

컴포넌트가 처음 로딩될 때, 생성자를 통해 name  속성을 가진 객체를 컴포넌트 상태(state)로 지정

데이터가 동적으로 변해야 하는 경우는 props 나 state로 받아야 한다.

this.setState({
  name : 'Sheep'
})

리액트 생명주기

리액트 네이티브 클래스가 생성되면서 메서드들이 생명주기 메서드와 연결. constructor, componentDidMount, render 등이 있는데 더 자세한건 2장에서 다룬다고 한다.

생명주기 메서드

• 동기화
• 컴포넌트 state 관리 지원
• 필요에 따라 단계별로 코드가 실행하도록 지원
  -> render 되기 전에 미리 불러와야 하는 것들 처리하는 코드같은 상태를 말하는 것 같음
• render 는 꼭 있어야 하며, 다른 생명주기 메서드는 선택적으로 필요함

리액트 네이티브의 작동 방식 이해

JSX

JSX는 XML처럼 보이는 자바스크립트의 구문 확장이다. 리액트 컴포넌트를 만들 때 JSX 가 없어도 되지만, JSX를 사용하면 리액트와 리액트 네이티브 프로젝트의 가독성과 유지보수가 훨씬 더 쉬워진다고 한다.

jsx 소개 페이지 : https://reactjs.org/docs/introducing-jsx.html

스레드 처리

네이티브 기기와 통신하는 모든 자바스크립트의 기능은 분리된 별도의 스레드로 처리된다.

모든 자바스크립트의 동작은 네이티브 플랫폼과 인터렉션에서 별도의 스레드로 처리하기 때문에 인터페이스와 애니메이션 구동이 자연스럽게 보이는 것임!!!

 

리액트 네이티브 앱 내에서 실행되는 스레드는 API 호출, 터치 이벤트, 인터렉션을 처리

네이티브 내부의 변화가 필요할 때에는 일괄처리 후 네이티브에 전달

리액트

• 리액트 네이티브는 리액트를 사용한다 🧸
• 리액트는 본래 웹 앱 생성 + 웹 문제 해결을 위한 툴이었지만 랜더링 속도와 유지, UI 로 인해 많은 주목을 받음
• 리액트는 가상 DOM 을 사용하여 성능이 떨어지던 기존 DOM을 대체
  그러니까, 기존엔 DOM에서 삐비비빕 처리 -> 느림 이랬는데
  리액트는 가상 DOM에서 쀼쀼쀼쀼 처리하고 결과본만 실제 DOM에다가 비교해서 다른점을 덮어 씌우기 때문에 DOM 연산이 줄어듦

단방향 데이터 흐름

단방향 데이터 흐름 엄청 강조하는데 이렇게되면 구조가 단순해짐

디핑 (코드 배교)

리액트는 코드를 비교하고 네이티브 컴포넌트에 반영함 (UI 와 네이티브 컴포넌트를 갱신하는 스레드에 최소한의 데이터를 전달할 떄 사용됨)

리액트 네이티브의 강점

책에서 길게 서술하는데 간단하게 요약하면,

• 오픈소스
• crossplatform
• 성능
• 데이터 단방향 흐름 (MVC framework와는 다르게 React native 는 단방향 데이터 흐름임)
  이게 무슨 소린가 했더니 Data -> Home ->  Parent -> Children 이 구조 얘기였다
  이것때문에 팝업같은거 만들 때 역으로 데이터 보내는걸 한참 어려워했었는데 이게 장점이었다니..뒤에서 자세히 다룬다니 좀 이해해보고싶다
• 트랜스파일링(transpilation)
  바벨..항상 프로젝트 생성할때 옵션에 babel 이런걸 봤었는데 이게 트랜스파일링과 관련된거라 한다
  트랜스파일링은 transpiler가 특정 프로그램 언어로 작성된 코드를 다른 언어의 코드로 번역해주는 것을 뜻하는데 React Native는 트랜스파일링 과정에서 기본적으로 내장된 Babel (바벨)을 사용한다. 바벨은 트랜스파일링 오픈소스 도구로 최신 자바스크립트의 언어 기능까지 바로 사용할 수 있도록 변환해준다고 함

리액트 네이티브의 약점

• 순수한 iOS나 하이브리드 방식인  코르도바에 비해 부족한 부분이 있음
• 리액트를 모르면 완전 새롭게 배워야함

기본 컴포넌트 만들어 사용하기

View, Text , Image 등과 같은 기본적인 컴포넌트 제공. 블록 조립처럼 컴포넌트를 사용해 새로운 컴포넌트를 만들 수 있음

ES5로 만든 컴포넌트는 리액트를 사용할 떄에도 오류가 미친듯이 났었는데, 여기서도 지양하라고 되어있다.

 

시작 프로젝트 만들기 챕터는 첫 환경 세팅에 대한 내용들은 없어서 다른 블로그나 공식 페이지를 보고 참고해야 할 것 같아서 따로 기록하겠다.

 

배운점 🧸

SSAFY에서 프로젝트만 진행할 때에는 결과물을 만들기 급급해서 이론보다 직접 부딪쳐서 결과를 만들어냈다. 웹이다 보니까 사이드 이펙트도 바로 보이고 내가 사용한 코드가 정확히 뭔지는 몰라도 대충 이런걸 한다,, 정도만 알고 있어도 동작했지만 확실히 이런 배경지식을 가지고 공부했다면 더 좋았을 것 같다. 뭔가 이론을 뒤늦게 배우기 시작하니까 나름 잘하고 있다고 생각했던 프론트분야도 내가 그동안 얼마나 수동적으로 개발하고 있었는지 깨닫게 되는것 같다.