React Native - State

React에서의 Props, State, useState, 이벤트 등을 그대로 사용한다.

클래스형 컴포넌트에서 어떻게 사용해야하고, 동작하는지는 React강의를 들으며 정리한 자료에 나와있다.

 

State

https://joylee-developer.tistory.com/110

생활코딩 React 강의 (5) - State

이벤트, setState

https://joylee-developer.tistory.com/111

생활코딩 React 강의 (6) - 이벤트

함수형 컴포넌트를 사용한 적이 있지만, 글로 정리한 것이 없어서 여기에서는 짧게 정리하려고 한다.

 

State

import React, {useState} from "react";

const [변수, 함수] = useState(초깃값)

state는 여러 개 지정할 수 있다.

const [count, setCount] = useState(0);
const [name, setName]= useState('');

count는 setCount(++count) 를 통해서만 변경할 수 있고, 

name은 setName(newName) 을 통해서만 변경할 수 있다.

직접 count = 5; 와 같이 변경한다면 오류가 발생하고, state가 변경된 것을 감지할 수 없다.

state가 변경되면서 해당 컴포넌트와 하위 컴포넌트까지 다시 랜더링되는데 감지하지 못하면 state의 값은 바꼈지만 새로고침이 되지 않아 화면에서는 변화가 없다. 그래서 지정된 함수를 통해서만 변경해야 한다.

 

addition, multiple이라는 state를 만들고, addition과 multiple이라는 이름의 버튼을 만들었다.

addition은 누르면 0에서 2씩 수가 증가하고, multiple은 누르면 1에서 2씩 곱한다.

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

import React, { useState } from "react"; import { View, Text } from "react-native"; import MyButton from "./MyButton";   export default function App() {   const [addition, setAddition] = useState(0);   const [multiple, setMultiple] = useState(1);     return (     <View>       <Text style={{ fontSize: 20 }}>{addition}</Text>       <Text style={{ fontSize: 20 }}>{multiple}</Text>       <MyButton title="addition" onPress={() => setAddition(addition + 2)}/>       <MyButton title="multiple" onPress={() => setMultiple(multiple* 2)}/>     </View>   ); }   Colored by Color Scripter

cs

 

state의 값이 변하면 컴포넌트가 다시 렌더링 되므로 변한 수를 바로 <Text>에서 보여줄 수 있다.