리액트 네이티브를 다루는 기술: 2.7.4 조건부 렌더링 구현하기

2.7.4 조건부 렌더링 구현하기

조건부 렌더링이란 특정 조건에 따라 다른 결과물을 보여주는 것을 의미합니다. visible 값이 true일 때만 Box 컴포넌트를 보여줘야 하는데, 이를 구현하는 방법은 두 가지가 있습니다.

첫 번째 방법은 삼항연산자를 사용하는 것입니다.

App.js

import React, {useState} from 'react';
import {SafeAreaView, Button} from 'react-native';
import Box from './components/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="blue" /> : null}
    </SafeAreaView>
  );
};

export default App;

신간 소식 구독하기

뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.