happy cat image

everdevel

Brand New Day

login
알림X
  • 현재 댓글에 대한 답변만 표시합니다.
  • 표시할 댓글 이력이 없거나 로그인해 주세요.

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

if 조건문 사용하기

앞에서 삼항연산자를 사용해 HomeButton 값을 출력했습니다.

JSX안에서는 제어문을 사용할 수 없어서 삼항연산자를 사용했는데요.

이번엔 HomeButton은 원래대로 변경하고 if문을 사용해서 값을 출력할 값을 변경하도록 하겠습니다.

if문에 대한 사용법은 다음의 링크에서 확인 할 수 있습니다.

if문 사용방법

다음과 같이 JSX 위에서 if문을 사용해 HomeButton값을 변경합니다.

import React from 'react';
import PropTypes from 'prop-types';

function Device( {name, ram, homeButton, touchID, faceID, cpu} ) {

    if (homeButton == true) {
        homeButton = "있음";
    }else {
        homeButton = "없음";
    }

    return (
        <div>
            <h3>Name : {name}</h3>
            <h3>RAM : {ram}</h3>
            <h3>Home Button : { homeButton }</h3>
            <h3>TouchID : {touchID}</h3>
            <h3>FaceID : {faceID}</h3>
            <h3>CPU : {cpu}</h3>
        </div>
    );
}

Device.defaultProps = {
    cpu : "cpu정보가 없습니다.",
};

Device.propTypes = {
    name: PropTypes.string.isRequired,
    ram: PropTypes.number.isRequired,
    homeButton: PropTypes.bool.isRequired,
    touchID: PropTypes.string,
    faceID: PropTypes.string,
};

export default Device;

결과

ReactJS if statement

    
    

강좌로 돌아가기

댓글 0개

정렬기준