React Native를 위한 React 기본 문법 정리

이번글에서는 React Native을 본격적으로 공부하기에 앞서, React Native를 공부하는 데에 도움이 되는 기본 React 개념들에 대해 정리해보고자 한다.

 

 

State란?

● State는 React 기본문법으로, 컴포넌트 내에서 렌더링 되는 데이터를 저장하고 관리하는 Javscript언어의 객체이다.

 

 

 

State의 특징

캡슐화 : state는 일반적으로 해당 컴포넌트 내에서 관리되기에, 컴포넌트 외부에서 직접적으로 접근할 수 없어  캡슐화하여 렌더링 할 데이터를 관리하는데 유용하다.

 

데이터 유지 보수 및 관리 편의성 : state를 사용하게 되면 따로 렌더이할 데이터들을 객체로 묶어 관리할 수 있게 되며, 직접 텍스트를 하나하나 렌더링 하는 것보다 한번 필터링된 데이터를 선별적으로 출력하는 것이 가독성을 높이며 코드의 재사용적인 측면에서의 성능을 높여준다. 

 

 

 

 

State 관련 기본 예제

 

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

class App extends Component {

// 화면에 text태그를 이용하여 text 렌더링
  render() {
    return (
      <View style={styles.background}>
        <Text style={styles.text}>
          직접 Text태그에 적음
        </Text>
      </View>
    )
  }
}


// 스타일 시트
const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 35,
  }
})

export default App;

 

 

 

 

 

위의 예제는 지금까지 배운 기본적인 렌더링요소만을 포함하여 Text태그에 직접 Text를 입력하여 화면에 출력해본 예제이다. 아래에서는 이를 State를 활용하여 화면에 Text를 출력해보겠다.

 

 

 

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

class App extends Component {

// 텍스트들 관리할 state객체 생성
  state = {				
    stateText: 'state로 텍스트 출력'
  }


// 화면에 state에 저장된 텍스트 렌더링
  render() {	
    return (
      <View style={styles.background}>
        <Text style={styles.text}>
          {this.state.stateText}
        </Text>
      </View>
    )
  }
}


// 스타일 시트
const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 35,
  }
})

export default App;

 

 

위의 예제는 일반적으로 <Text> 태그를 씌워 text를 출력하지 않고 state 객체를 활용하여 화면에 text를 출력한 것이다. 

(+State는 함수가 아닌 클래스로 선언해야 사용할 수 있으니 이부분은 주의해야한다. --> App을 function으로 선언했다면 사용못함)

 

 

 

 

setState 란?

● setState는 React의 기본문법으로 React Componant의 상태관리를 위해  State의 값을 비동기적으로 변경시킬 때 사용는 메서드이다.

 

 

 

setState의 특징

 

비동기성 : setState는 비동기적으로 실행되므로, setState 호출 직후 this.state를 참조하면 업데이트 이전의 상태를 보게 될 수 있기에 주의해야 한다.

 

State객체를 일부만 수정가능 : setState를 사용하여 state 객체의 일부분만 업데이트할 수 있으며, 나머지 상태는 변경하지 않을 수 있다.

 

함수를 통해 State를 업데이트가능 : setState는 업데이트 함수를 인자로 받을 수 있는데, 이 함수는 이전 상태(prevState)와 현재 속성(props)을 인자로 State 데이터를 업데이트하는 것이 가능함하다.

 

 

setState를 사용하여 State의 값을 변경해야하는 이유

● setState를 활용하지 않고 그냥 Sate에 선언했던 변수에 접근하여 값을 변경하는 경우에는 변경된 값을 다시 렌더링하지 않기에 화면에 변경된 부분이 반영되지않음

 

 

 

 

 

setState 관련 기본 예제

 

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

class App extends Component {

  // 텍스트들 관리할 state객체 생성
  state = {
    stateText: 'state로 텍스트 출력'
  }


  // 화면에 state에 저장된 텍스트 렌더링
  render() {
    return (
      <View style={styles.background}>
        <Text style={styles.text} onPress={this.changeText}>
          {this.state.stateText}
        </Text>
      </View>
    )
  }
  
  // setState를 활용하여 State에 저장된 Text값을 변경하기 위한 함수세틸
  changeText = () => {
    this.setState({
      stateText: 'setState로 바꿈'
    })
  }
  
  
}

// 스타일 시트

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 35,
  }
})

export default App;

 

 

 

 

 

 

 

 

위의 예제는 위에서 state를 활용해서 Text를 출력하고, 해당 내용을 setState로 바꾸는 함수를 추가해 텍스트를 클릭하면 setState로 변경한 값이 출력되게하는 코드를 구현한 것이고, setState를 활용하여 제대로 변경된 state값을 화면에 출력해주는 모습이다.

 

하지만 앞서 말했다시피 setState를 활용하지않고 아래 코드처럼 State내의 속성을 재선언하는 식으로 코드를 구현하게되면 아래의 결과값처럼 아무리 버튼을 눌러도 제대로 변경되지 않는 모습이다.

 

 

  // setState를 활용하여 State에 저장된 Text값을 변경하기 위한 함수세틸
  changeText = () => {
    state = {
      stateText: '바뀌었나?'
    }
  }

 

 

 

 

 

 

 

Props란?

● Props는 React의 기본 문법으로 Properties의 약자이다. 또한, 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터들의 집합으로, 주로  부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다.

 

 

Props의 특징

 

읽기 전용: Props는 자식 컴포넌트에서 변경할 수 없으며, 부모 컴포넌트에서 받은 그대로 사용된다

 

컴포넌트의 재사용성을 증가: 잘 설계된 컴포넌트는 다양한 상황에서 재사용할 수 있도록 범용적인 props를 받아 입맛대로 props를 끌어다 쓸 수 있기에 컴포넌트의 재사용성을 증가시켜준다.

 

일방통행 : 부모로부터 자식에게 일방적으로 데이터가 전달되는 구조임

 

(+Props는 부모,자식 관계가 형성되어야 의미있음)

 

 

 

 

props 관련 기본 예제

 

// App.js 파일

import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';
// 다른 파일에서 props를 활용하는 것을 보여주기 위해 다른파일을 import해줌
import PropsChild from './propsChild';

class App extends Component {

  // 텍스트들 관리할 state객체 생성
  state = {
    stateText: 'state로 텍스트 출력'
  }


  // PropsChild로 stateText와 changeText 값 전달후 반한되는 값 렌더링
  render() {
    return (
      <View style={styles.background}>
        <Text style={styles.text}>
          <PropsChild stateText={this.state.stateText} changeText={this.changeText} />
        </Text>
      </View>
    )
  }
  
  // setState를 활용하여 State에 저장된 Text값을 변경하기 위한 함수세틸
  changeText = () => {
    this.setState(({
      stateText: 'setState로 바꿈'
    }))
  }
  
  
}

// 스타일 시트

const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 35,
  }
})

export default App;

 

// propsChilde.js 파일


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

// Props로 부모 컴포넌트에서 값과 함수를 전달받아 해당 텍스트를 출력
const PropsChild = (props) => {
    return (
        <View>
            <Text onPress={props.changeText}>
                {props.stateText}
            </Text>
        </View>
    ) 
}

export default PropsChild;

 

 

 

 

 

 

위의 예제는 다른 파일에서 부모 컴포넌트와 자식 컴포넌트사이의 데이터 전달을 props를 활용하여 처리한 예제이다.

props는 부모,자식끼리의 관계가 형성되어야 의미 있기에 서브파일인 propsChild.js파일을 생성해주었고 App.js에서 해당 파일을 import해주었다. 그다음 렌더링부분을 props를 활용하여 propsChild.js에서 치라히게 끔 인자들을 전달해주었다.

 

이 예제를 통해 props는 다른 파일로 전달인자를 보낼때 매우 유용하게 쓰이는 것을 알 수 있다. 

 

(+스타일을 부모에서 자식으로 넘기고 싶다면 아래 코드와 같이 Props를 넘기는 요소에 같이 넘기면된다.)

 

 

부모스타일을 props를 이용해 자식에게도 적용하는 방법

위의 촬영된 영상과 스타일을 비교하여 제대로 부모 스타일이 자식스타일에도 적용되었는지 확인해가며 아래 예제를 보도록 하자.

 

// 부모파일 (App.js)

render() {
    return (
      <View style={styles.background}>
        <Text style={styles.text}>
          // 여기서 style를 props를 같이 보내기
          <PropsChild stateText={this.state.stateText} changeText={this.changeText} style={styles.text}/>
        </Text>
      </View>
    )
  }
  
  
// 스타일 시트
const styles = StyleSheet.create({
  background: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 35,
    color: 'blue',
  }
})

 

// 자식 파일 (propsChild)

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

const PropsChild = (props) => {
    return (
        <View>
            // props를 통해 style 가져오기
            <Text onPress={props.changeText} style={props.style}> 
 
                {props.stateText}
            </Text>
        </View>
    ) 
}

export default PropsChild;