[React Native] State는 어떻게 사용할까?

state는 리액트 네이티브에서 구성 요소를 제어하는 데이터 유형 중에 하나이다. state는 동적인 데이터를 다룰 때 주로 사용된다. state의 값을 바꾸고 싶다면 setState함수를 사용하여 바꿀 수 있다. 여기서 중요한 점은 setState가 호출될 때마다 해당 컴포넌트가 있는 뷰들은 다시 랜더링을 하게 된다.

 

이것은 state를 필요하지 않다면 너무 많이 선언하지 말라는 것과 같다. 불필요한 state는 너무 많은 뷰를 랜더링 하게 하기 때문이다.

 

• state변수는 setState를 통해서 값을 바꾸어준다.
• setState가 호출되면 해당 컴포넌트가 있는 뷰는 다시 랜더링하게 된다.
• 너무 많은 state는 앱의 기능 저하로 이어질 수 있다.

기본 화면

오늘의 기본 화면이다. 갑자기 개구리 생각이 나서 녹색녹색하게 색깔을 넣어보았다.

 

import React, { Component } from 'react';
import { Text, View, Button, TextInput, StyleSheet } from 'react-native';
 
export default class App extends Component {
  state = {
    inputName: '',
    number: 0,
    todos: []
  }
 
  addNewTodo = () => {
    this.setState({ number: this.state.number + 1 });
 
    const newState = {
      id: this.state.number,
      text: this.state.inputName,
    }
 
    this.setState({ todos: [newState, ...this.state.todos], inputName: '' });
    console.log(this.state.todos);
  }
 

 

state변수 선언 부분과 to do 앱을 만들기 위한 함수 addNewTodo가 있는 부분이다.

 

1. inputName TextInput에서 입력되는 값들을 저장해줄 변수이다.
2. number 나중에 FlatList로 넣어주기 위한 key값을 저장해 줄 변수이다.
3. todos 할 일을 넣어주는 Objects를 받는 Array 변수이다.

addNewTodo는 newState 오브젝트를 만들어 todos에 저장하는 역할을 하는 함수이다.

 

 render() {
    return (
      <View style={styles.container}>
        <View style={styles.headerView}>
          <Text style={styles.headerText}>state로 놀기</Text>
          <View style={styles.textView}>
            <TextInput
              style={styles.textInput}
              placeholder='아무거나 눌러주세요.'
              value={this.state.inputName}
              onChangeText={(name) => { this.setState({ inputName: name }) }}
            />
            <Button title='제출' onPress={this.addNewTodo} />
          </View>
        </View>
      </View>
    );
  }
}

 

onChageText를 통해서 TextInput에 입력되고 있는 값들을 this.state.inputName에 저장한고 입력을 마치고 제출 버튼을 누르게 되면 addNewTodo 함수를 실행시켜준다. 

 

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#E6FFE6',
    paddingHorizontal: 30,
    flex: 1,
  },
  headerText: {
    marginHorizontal:10,
    fontSize: 40,
  },
  headerView: {
    paddingTop: 50,
    backgroundColor: '#FAFAB4',
    flex: 1,
  },
  textView: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginVertical: 20,
  },
  textInput: {
    width: 200,
    height: 40,
    paddingHorizontal: 10,
    borderRadius: 10,
    borderColor: 'gray',
    borderWidth: 1
  }
})
 

 

스타일 코드는 따로 설명하지 않겠다.

 

코드를 다 작성하고 앱을 누르면 아무런 변화가 일어나지 않을 것이다. 왜냐하면 오늘은 console.log를 사용하여 결과물을 보여주려고 하기 때문이다. 아래 보이는 그림들은 차례로 검색어를 입력한 것이다. 그리고 마지막에는 콘솔 창을 보여주어 어떻게 todos에 오브젝트가 입력되고 있는지 보여주겠다.

 

안녕

이걸로 to do 앱을 완성시킬거야

내일 flatList 넣어서 해볼게

console.log 내용이다.

 

log 내용에서 볼 수 있듯이 정상적으로 id값과 text값이 전달되어 todos 배열에 오브젝트가 하나씩 들어가는 것을 볼 수가 있다.

 

이렇게 오늘은 to do 앱을 만들 수 있는 state의 사용 방법에 대해 알아보았고 state에 대해서도 알아보았다.

 

이게 이해가 되고 있다고 말해야하는건지 아니면 끼워 맞춰서 하고 있는 건지 모르겠다. 좀 잘 짜인 자료가 있었으면 좋겠는데 애초에 타입스크립트 + 리액트 네이티브 조합을 쓰는 사람들이 많지 않은 것 같다. 구글링 해서 오 좀 좋은 것 같은데 생각되는 것들은 거의 자바스크립트로 만들어진 거라서 안 되는 경우가 너무 많다. 허허;; 구럼 2만