5. 동적 화면 관리(useState Hook)

1. useState : 상태값을 관리하는 함수

  const [visible, setVisible] = useState(true);

const [visible, setVisible] = useState(true);
visible : 상태값
setvisible : 상태값을 변경하는 함수

2. Button컴포넌트, , onPress 함수 사용하기

import React, {useState} from 'react';
import {SafeAreaView, Button} from 'react-native';
import Box from './componets/Box';

const App = () => {
  const [visible, setVisible] = useState(true);
  const onPress = () => {
    setVisible(!visible);
  };

  return (
    <SafeAreaView>
      <Button title="토글" onPress={onPress} />
      {visible && <Box rounded={true} size="large" color="yellow" />}
    </SafeAreaView>
  );
};

export default App;

클릭할때만 네모 박스가 나오게끔 설정.

• visible 값이 true일때만 Box컴포넌트를 보여주기.
• onPress함수를 구현한 다음, Button의 onPress Props로 지정하면 버튼을 눌렀을때마다 함수가 호출 됨