인라인 조건

인라인 조건

조건문을 코드 안에 직접 작성하는 것

 

인라인 if

실제로 if문을 넣는 것이 아닌 if문과 동일한 효과를 내기위해 && 논리연산자를 사용

&&: 양쪽에 나오는 조건이 모두 true인 경우에만 true가 된다.

예시:

true && expression -> expression // 첫 번째가 true 이므로 두 번째 조건문을 평가함

false && expression -> false // 첫 번째가 false 이므로 전체 결과가 false가 되므로 두 번째 조건문은 평가하지 않음, 이것은 단축평가라고함. -> 결과가 정해져있는 논리연산에서 불필요한 연산을 하지 않음   

import React, { useState } from 'react';

function Toggle() {
    const x = 1;
    return (
        <div>
            <h1>안녕</h1>
            { x > 0 && 
                <h2>
                    렌더링
                </h2>    
            }
        </div>
      );
}
export default Toggle;

 

주의 사항: 조건문에 Falsy 표현식을 사용하면 뒤에 나오는 표현식은 평가되지 않지만 Falsy 표현식의 결과값이 0 이 리턴됨

import React, { useState } from 'react';

function Toggle() {
    const count = 0;
    return (
        <div>
            {count && <h1>현재 카운트: {count}</h1>}
        </div>
      );
}
export default Toggle;

count 값이 0 이면 falsy 이므로 falsy 값인 0이 그대로 출력됨

 

인라인 If-Else

삼항 연산자를 사용

조건문 ? 참일 경우 : 거짓일 경우

import React, { useState } from 'react';

function Toggle() {
    return (
        <div>
            이 사용자는 현재 {true ? <p>로그인</p> : <p>로그아웃</p>} 
        </div>
      );
}
export default Toggle;

 

컴포넌트 렌더링 막기

컴포넌트를 렌더링 하고 싶지 않을 때 null을 리턴

리액트에서는 null을 리턴하면 렌더링하지 않음

 

import React, { useState } from 'react';

function Toggle() {
    const x = true;
    if (x) {
        return null;
    }
    return (
        <div>
            이 사용자는 현재 {true ? <p>로그인</p> : <p>로그아웃</p>} 
        </div>
      );
}
export default Toggle;

실행 결과 화면에 아무것도 나오지 않음