[React Native] 필요한 React 지식

1. 사전 작업

react-native init --version 0.61.5 react_test
cd react_test
code .

// 터미널 1
npm start

// 터미널 2
react-native run-ios

 

 

 

2. React

1) 기본 코드

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
    )
  }
}

export default App;

코드	설명
import React, { Component } from 'react';	'react' 모듈에서 Component 클래스 import
class App extends Component { }	Component를 상속받는 App 클래스
render() { }	화면 렌더링 함수
return ( )	화면 구성 반환

2) 기본 코드 수정

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

class App extends Component {
  render() {
    return (
      <View style={styles.background}>
        <Text> Hello World </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App;

코드	설명
import { View, Text, StyleSheet } from 'react-native';	react native 모듈에서 화면 구성에 필요한 View, Text, StyleSheet 클래스를 import
<View style={styles.background}>         <Text> Hello World </Text> </View>	화면에 텍스트 띄우기
const styles = StyleSheet.create( {} )	화면 스타일 구성

3) State

Component에서 랜더링되는 데이터를 담고 유지 관리하는 자바스크립트 객체이다. 랜더링 데이터를 다루기 때문에 중요한 개념이며, State에 따라 화면에 보여지는 것이 달라진다. State는 클래스 Component 안에서만 사용이 가능하며, 함수 Component를 정의했다면 사용할 수 없다.

// State 사용 불가능
const App = () => {
  return (
  )
}

// State 사용 가능
class App extends Component {
  ...
}

State는 기본적으로 랜더 함수 밖에서 정의가 되며, 데이터의 재사용성과 수정에 용이하다는 장점을 가지고 있다. 쉽게 생각한다면 클래스 내에 변수와 값을 설정하고, 이를 이용하는 방식이다.

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

class App extends Component {

  state = { // 재사용성, 수정 용이
    sampleText: 'Hello World',
    sampleBoolean: false 
  }

  inputText = () => (
    this.state.sampleBoolean ?
      <Text>SampleBoolean is true</Text>
    :
      <Text>SampleBoolean is false</Text>
  )

  render() {
    return (
      <View style={styles.background}>
        {this.inputText()}
      </View>
    )
  }
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App;

4) setState

기본적으로 State는 초기에 설정한 값 외에는 변경을 할 수 없다. 즉, State는 직접 변경하면 안되는 특징을 가지고 있다. 하지만 setState 메서드를 이용한다면, 변경이 가능하다.

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

class App extends Component {

  state = {
    sampleText: 'Hello World',
    sampleBoolean: false
  }

  inputText = () => (
    this.state.sampleBoolean ?
      <Text>SampleBoolean is true</Text>
    :
      <Text>SampleBoolean is false</Text>
  )

  changeState = () => {
    // this.setState({
    //   sampleText: 'Text Changed'
    // })
    if(!this.state.sampleBoolean) {
      this.setState({
        sampleText: 'Text Changed',
        sampleBoolean: true
      })
    } else {
      this.setState({
        sampleText: 'Hello World',
        sampleBoolean: false
      })
    }
  }

  render() {
    return (
      <View style={styles.background}>
        <Text onPress={this.changeState}>
          {this.state.sampleText}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App;

State의 특징중 하나는 비동기성이다. setState를 통한 데이터 변경은 현재 버전을 복사하고 업데이트를 한다. 만약 현재 버전을 복사하지 않는다면 하단의 이미지처럼 에러가 발생한다.

State 비동기성 문제점

이를 해결하기 위해서는, prevState라는 현재 버전의 State 값을 인자로 넣어주면 해결이 가능하다.

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

class App extends Component {

  state = {
    sampleText: 'Hello World',
    sampleBoolean: false,
    sampleNum: 1
  }

  onAdd = () => {
    this.setState(prevState => {
      return {
        sampleNum: prevState.sampleNum + 1
      }
    })
  }

  render() {
    return (
      <View style={styles.background}>
        <Text onPress={this.onAdd}>
          {this.state.sampleNum}
        </Text>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App;

5) Props

Props는 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로, (자식 입장에서)읽기 전용이다. 부모로부터 자식은 Props라는 데이터를 전달 받게 되는데, 이 데이터는 변경되지 않고 그대로 사용된다는 것이다. 즉, 부모가 자신이 가지고 있는 정보를 자식에게 전달해주기 위한 수단으로 사용된다.

 

예를 들어, 부모 파일인 App.js와 자식 파일인 propsChild.js가 있다고 가정해본다. 여기서 부모 파일에 작성된 state(sampleText) 및 함수(chageState)를 자식 파일에게 전달한다고 했을 때 다음과 같이 진행하면 된다.

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

// 자식 파일 import
import PropsChild from './propsChild';

class App extends Component {

  state = {
    sampleText: 'Hello World',
    sampleBoolean: false,
  }

  changeState = () => {
    if(!this.state.sampleBoolean) {
      this.setState({
        sampleText: 'Text Changed',
        sampleBoolean: true
      })
    } else {
      this.setState({
        sampleText: 'Hello World',
        sampleBoolean: false
      })
    }
  }

  render() {
    return (
      <View style={styles.background}>
        // 자식에게 sText라는 이름으로 sampleText를, cState라는 이름으로 changeState 함수를 전달
        <PropsChild sText={this.state.sampleText} cState={this.changeState}/>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

export default App;

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

const PropsChild = (props) => {
    return (
        <View>
          <Text onPress={props.cState}>
            {props.sText}
          </Text>
        </View>
    )
}

export default PropsChild;

 

 

 

3. 괄호의 차이

React에서의 괄호의 차이는 중요하다. '{ }'는 반환되는 JSX(JavaScript Xml) Component가 없는 반면, '( )'는 JSX Component를 반환할 수 있다. (소괄호 내부에 코드가 없을 경우, 빨간 밑줄로 오류가 있음을 확인 가능)

testFunction = () => {
}

testFunction = () => (
)