React Native에서 Flutter로 갈아타기 #4 - useState => setState

React native 상태 관리가 쉬웠었나? 어려웠나?.. 글쎄.. 난 늦게 react native를 시작해서 useState() 같은 훅으로 상태 관리하는 걸 배웠거든.... 그래서 음.. 딱히 어렵지 않았어.

예를 들어 number라는 state가 유지되게 하려면 아래처럼 👇👇 useState()를 사용했잖아?

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

function App() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(prev => prev + 1);
    console.log(number);
  }
  const onDecrease = () => {
    setNumber(prev => prev - 1);
    console.log(number);
  }
  return (
    <View style={{padding: 10}}>
      <Text>{number}</Text>
      <TouchableOpacity onPress={onIncrease}> +1</TouchableOpacity>
      <TouchableOpacity onPress={onDecrease}> -1</TouchableOpacity>
    </View>
  );
}

export default App;

useState의 첫 번째 배열에 상태 변수를 두 번째 배열에 상태를 변경하는 함수를 지정해주고 사용하는 사용하는 방식이었지. 음~~ 보기에 매우 익숙하군... 

Flutter에서 useState()를 구현하기 위해 class를 statefulWidget으로 선언해야해. 보통 st만 타이핑해도 자동 완성되니까 쓸데없이 다 치지 말라고👇

st만 타이핑해도 자동완성.

이제 생성한 stateful widget에 counter 변수를 하나 선언하고 버튼 위젯의 onPressed callback 안에서 setState()함수를 선언해주면 돼. 그러면 버튼을 클릭할 때마다 화면을 다시 렌더링할거야.

class StatefulWidgetTest extends StatefulWidget {
  const StatefulWidgetTest({super.key});

  @override
  State<StatefulWidgetTest> createState() => _StatefulWidgetTestState();
}

class _StatefulWidgetTestState extends State<StatefulWidgetTest> {
  int counter = 0;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            counter.toString(),
          ),
          TextButton(
              onPressed: (() {
                setState(() {
                  counter++;
                });
              }),
              child: const Text(
                "+",
              )),
          TextButton(
              onPressed: (() {
                setState(() {
                  counter--;
                });
              }),
              child: const Text(
                "-",
              ))
        ],
      ),
    );
  }
}

 

 

그러니가 react의 useState와 거의 유사하지만 사실 잘 생각해보면... 변수에 불과한 state를 관리하는데 useState()라는 괴상한 함수를 호출해야 하는 것 자체가 조금 이상했어. 차라리 Flutter처럼 state 변수 하나 선언하고 setState()라는 함수로 "화면 업데이트 하쇼!"하는 게 더 직관적인거 아닌가? 아니면 말고 ㅋㅋ 뭐 억지로 flutter가 좋은 점 찾는 거야 ㅋㅋㅋㅋ 그래야 정붙어서 계속하지 ㅋㅋㅋ

StatefulWidget - Counter

 

다음에는 React native의 useEffect를 Flutter에서는 어떻게 하는지 알아보자고. 안녕!