[React] 조건부 렌더링(Conditional Rendering)

 

 

1. 조건부 렌더링(Conditional Rendering)

 

1) 개념

- 조건에 따라 렌더링의 결과가 달라지도록 하는 것

function Greeting(props) {
    const isLoggedIn = props.isLoggedIn;
    if(isLoggedIn) {
        return <UserGreeting />;
    } 
    return <GuestGreeting />;
}

-> props로 들어오는 isLoggedIn에 값(조건)에 따라서 화면에 출력하는 결과가 달라지게 됨

 

 

2) 엘리먼트 변수(Element Variables)

- 리액트 엘리먼트를 변수처럼 저장해서 사용하는 방법

function LoginControl(props) {
    //useState()훅을 사용해서 사용자의 로그인 여부를 자체적으로 관리
    const[isLoggedIn, setIsLoggedIn] = useState(false);

    const handleLoginClick = () => {
        setIsLoggedIn(true);
    };

    const handleLogoutClick = () => {
        setIsLoggedIn(false);
    }

    let button;
    if(isLoggedIn) {
        button = <LogoutButton onClick={handleLogoutClick} />;
    } else {
        button = <LoginButton onClick={handleLoginClick} />;
    }

    // isLoggedIn의 값에 따라서 button이라는 변수에 컴포넌트를 대입
    // 컴포넌트가 대입된 변수를 return에 넣어서 실제로 컴포넌트(실제로는 리액트 엘리먼트)가 렌더링 되도록 만들고있음
    // 엘리 먼트를 변수처럼 사용하는 방법을 엘리먼트 변수라고 함
    return (
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {button}
        </div>
    );
}

 

 

3) 인라인 조건(Inline Conditions)

- 조건문을 코드 안에 집어 넣는 것

- 엘리먼트 변수를 선언해서 조건부 렌더링을 할 수 있지만 인라인 조건문은 코드가 더 간결해질 수 있음

- &&연산자 사용 시 조건문에 Falsy expression을 사용하면 뒤에 나오는 expression은 평가되지 않지만 falsy expression의 결과값은 리턴됨

 

 

 

a. 인라인 If

- If문을 필요한 곳에 직접 넣어서 사용

- 논리 연산자 &&을 사용(AND연산)

- 단축평가(short-circuit evaluation): 앞에 나오는 조건문이 true일 경우에만 뒤에 나오는 엘리먼트를 렌더링

true && expression -> expression
false && expression -> false

 

function Mailbox(props) {
    const unreadMessages = props.unreadMessages;

    return(
        <div>
            <h1> hi!!</h1>
            {unreadMessages.length > 0 &&
            <h2>현재 {unreadMessages.length} 개의 읽지 않은 메시지가 있습니다.</h2>
            }       
        </div>
    );
}

 

 

b. 인라인 If-Else

- If-Else문을 필요한 곳에 직접 넣어서 사용하는 방법

- 삼항 연산자  사용

function UserStatus(props) {
    return (
        <div>
            이 사용자는 현재 <b>{props.isLoggedIn ? '로그인' : '로그인 안한'}</b> 상태입니다.
        </div>
    );
}

 

- 조건에 따라 각기 다른 엘리먼트를 렌더링 하고싶을 때 사용

 

 

 

2. 컴포넌트 렌더링 막기 

 

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

function WarningBanner(props) {
    if(!props.warning) {
        return null;
    }
    return (
        <div>경고!!!!!</div>
    );
}

 

- 특정 컴포넌트를 렌더링하고 싶지 않을 경우 null을 리턴하면 됨