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

slide 1 of 18, currently active
slide 2 of 18
slide 3 of 18
slide 4 of 18
slide 5 of 18
slide 6 of 18
slide 7 of 18
slide 8 of 18
slide 9 of 18
slide 10 of 18
slide 11 of 18
slide 12 of 18
slide 13 of 18
slide 14 of 18
slide 15 of 18
slide 16 of 18
slide 17 of 18
slide 18 of 18

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;

신간 소식 구독하기

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