리액트 네이티브] 5. state

1. state?

 

props는 부모 컴포넌트에서 자식 컴포넌트에게 단순히 값만 전달할 뿐이고 자식 단위에서 수정할 수 없지만, state는 컴포넌트 내부에서 값을 선언하고 내부에서 값을 수정할 수 있다. state란 컴포넌트 내부에서 변화할 수 있는 값을 나타내며 상태가 변하면 컴포넌트는 리랜더링(Rerandering)이 된다. 

 

컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트가 있는데, 예전에는 함수형 컴포넌트에서 state를 사용할 수 없었지만, 지금은 Hook로 관리가 가능하므로 지금은 함수형 컴포넌트로 코딩하는게 트랜드이다.

 

 

2. useState

useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다. 예시를 보자.

예시는 변수 관리의 꽃, counter 앱이다.

 

useState의 선언 방식을 보자.

const [state, setState] = useState(init);

state를 선언할 때 두 개의 값이 있는 배열이 필요하다.

첫 번째 값은 상태이고, 두번째 값은 상태를 변경할 수 있는 setter함수이다. useState를 호출할 때 괄호 안의 값은 초깃값으로, 초깃값을 설정하지 않으면 undefined이므로 초깃값을 항상 설정해두는 것이 좋다.

 

예시를 보자. 

새 커스텀 컴포넌트를 만든다.

 

-../src/Counter.js

import React, { useState } from "react";
import {Text, View} from "react-native";
import MyButton from "./myButton";

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <View style={{ alignItems : 'center'}}>
            <Text style = {{fontSize : 30, margin : 10}}>{count}</Text>
            <MyButton title = "+1" onPress={() => setCount( count + 1)}/>
            <MyButton title = "-1" onPress={() => setCount( count - 1)}/>
        </View>
    );
}

export default Counter;

(Mybutton은 해당 포스팅에서 사용했습니다.)

https://itstudy-mary.tistory.com/383

 

초깃값을 0으로 설정하고, 해당 버튼을 클릭시 onPress 이벤트로 setter 카운트를 호출하여 해당 카운트 값을 변경한다.

이제 이 컴포넌트를 호출해보자.

 

- ../App.js

import React from "react";
import { View, Text, Button } from "react-native";
import MyButton from "../component/myButton";
import Counter from "../component/Counter"

const App = () => {
    return (
        <View style={{
            ...
          }}>
            <Counter/>
          </View>
    );
}

export default App;

 

결과를 보자.

 

초깃값은 0이며, +1을 하면 값이 +1이 되고, -1 클릭하면 값이 -1씩 된다.

 

물론 useState를 여러개를 사용하는 것도 가능하다.

 

-../src/Counter.js

import React, { useState } from "react";
import {Text, View} from "react-native";
import MyButton from "./myButton";

const Counter = () => {
    const [count, setCount] = useState(0);
    const [double, setDouble] = useState(0);

    return (
        <View style={{ alignItems : 'center'}}>
            <Text style = {{fontSize : 30, margin : 10}}>count : {count}</Text>
            <Text style = {{fontSize : 30, margin : 10}}>double : {double}</Text>
            <MyButton 
                title = "+" 
                onPress={() =>  {
                    setCount( count + 1);
                    setDouble( double + 2);
            }}/>
            <MyButton 
                title = "-" 
                onPress={() =>  {
                    setCount( count - 1);
                    setDouble( double - 2);
            }}/>
        </View>
    );
}

export default Counter;

 

버튼을 클릭할 때 마다 각각의 상태가 변화하는 것을 볼 수 있다.