[ React ]처음 만난 리액트_8_Conditional Rendering ( 강좌 참고 )

📌 Conditional Rendering

Conditional Rendering

조건에 따른 렌더링. ( 조건부 렌더링 ) : 어떠한 조건에 따라서 렌더링이 달라지는 것.

---

🤍 Inline Conditions

In + line : 코드를 별도로 분리된 곳에 작성하지 않고, 해당 코드가 필요한 곳 안에 직접 집어넣는다는 뜻.

Inline Conditions

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

---

∎ Inline If

• if문을 필요한 곳에 직접 집어넣어 사용하는 방법.
• if문과 동일한 효과를 내기 위해 && 연산자를 사용한다.
• && 연산자를 jsx 코드 안에서 중괄호를 사용하여 직접 집어넣는 방법이다.

예제 코드 )

function Mailbox(props){
    const unreadMessages = props.unreadMessages;
    
    return(
        <div>
             <h1>안녕하세요</h1>
             {unreadMessages.length > 0 &&
                 <h2>
                     현재 {unreadMessages.length}개의 읽지 않은 메시지가 있다.
                 </h2>
             }
         </div>
     );
 }
 
 //코드 참고
 //인프런_처음 만난 리액트

unreadMessages.length 가 0 보다 큰 지 평가하는 조건문의 결과값에 따라 <h2> 태그로 둘러싸인 부분이 렌더링 되거나, 안된다.

1. unreadMessages가 0보다 크다면?

: <h2> 태그 부분이 렌더링된다.

 

2. unreadMessages가 0보다 작다면?

: <h2> 태그 부분이 렌더링 안된다.

---

∎ Inline If-Else

• If-Else 부분을 필요한 곳에 직접 넣어서 사용하는 것.
• Inline If는 보여주거나, 안보여주거나 2가지 방법만 있지만, Inline If-Else는 조건문의 값에 따라서 다른 엘리먼트를 보여줄 때 사용한다. 이를 위해 ? 연산자를 사용한다.

예제 코드 1 )

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

//코드 참고
//인프런_처음 만난 리액트

1. props.isLoggedIn 값이 true인 경우

: '로그인'이라는 문자열이 출력.

 

2. props.isLoggedIn 값이 false인 경우

: '로그인하지 않은'이라는 문자열이 출력.

 

예제 코드 2 )

function LoginControl(props){
    const [isLoggedIn, setIsLoggedIn] = useState(false);
    
    const handleLoginClick = () => {
        setIsLoggedIn(true);
    }
    
    const handleLogoutClick = () => {
        setIsLoggedIn(false);
    }
    
    return(
        <div>
            <Greeting isLoggedIn={isLoggedIn} />
            {isLoggedIn
                ? <LogoutButton onClick={handleLogoutClick} />
                : <LoginButton onClick={handleLoginClick} />
            }
        </div>
    )
}

//코드 참고
//인프런_처음 만난 리액트

위 코드처럼 문자열이 아닌 엘리먼트를 넣어서 사용할 수도 있다.

1. isLoggedIn의 값이 true인 경우?

: LogoutButton 출력.

 

2. isLoggedIn의 값이 false인 경우?

: LoginButton 출력.

---

∎ Component 렌더링 막기

Component를 렌더링하고 싶지 않을 때는 어떻게 해야 할까?

null을 리턴하면 된다.

 

예제 코드 1 )

function WarningBanner(props){
    if(!props.warning){ //props.warning의 값이 false인 경우 null 리턴.
        return null;
    }
    
    //props.warging의 값이 true인 경우에만 경고 메시지를 출력하는 것이다.
    return(
        <div>경고!</div>
    );
}

//코드 참고
//인프런_처음 만난 리액트

예제 코드 2 )

function MainPage(props){
    const [showWarning, setShowWarning] = useState(false);
    
    const handleToggleClick = () => {
        setShowWarning(prevShowWarning => !prevShowWarning);
    }
    
    return(
        <div>
        	//showWarning이라는 state의 값을 WarningBanner 컴포넌트에 props로 전달하여,
            <WarningBanner warning={showWarning) />
            <button onClick={handleLoggleClick}>
                //showWarning 값에 따라 경고문을 표시하거나 표시하지 않게 된다.
                {showWarning ? '감추기' : '보이기'}
            </button>
        </div>
    )
}

//코드 참고
//인프런_처음 만난 리액트

---

🐱‍💻 로그인 여부를 나타내는 툴바 만들기

creative react app 프로젝트를 연다.

 

Toolbar.jsx

//Toolbar 이름의 함수 컴포넌트 생성.
import React from "react";

const styles = {
    wrapper: {
        padding:16,
        display: "flex",
        flexDirection: "row",
        borderBottom: "1px solid grey",
    },
    greeting: {
        marginRight: 8,
    },
};

//isLoggedIn 값을 props로 받아서,조건부 렌더링을 사용하여 환영메시지를 표시하거나 감추고,
//로그인,로그아웃을 보여주거나 숨기는 역할을 한다.
function Toolbar(props){
    const { isLoggedIn, onClickLogin, onClickLogout } = props;

    return (
        <div style={styles.wrapper}>
         	//&&,? 연산자를 사용하여 Inline If / Inline If-Else 조건부 렌더링 구현.
            {isLoggedIn && <span style={styles.greeting}>환영합니다!</span>}

            {isLoggedIn ? (
                <button onClick={onClickLogout}>로그아웃</button>
            ) : (
                <button onClick={onClickLogin}>로그인</button>
            )}
        </div>
    );
}

export default Toolbar;

//코드 참고
//인프런_처음 만난 리액트

이렇게 만든 툴바 컴포넌트를 사용하는 컴포넌트를 만들겠다.

 

LandingPage.jsx

//LandingPage 이름의 함수 컴포넌트 생성.
import React,{useState} from "react";
import Toolbar from "./Toolbar";

function LandingPage(props){
    const [isLoggedIn, setIsLoggedIn] = useState(false);

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

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

    return (
        <div>
            <Toolbar
                isLoggedIn={isLoggedIn}
                onClickLogin={onClickLogin}
                onClickLogout={onClickLogout}
            />
            <div style={{ padding: 16 }}>소플과 함께하는 리액트 공부!</div>
        </div>
    );
}

export default LandingPage;

//코드 참고
//인프런_처음 만난 리액트

LandingPage 컴포넌트는 useState Hook을 사용해서 사용자의 로그인 여부를 자체적으로 관리한다.

그리고 값을 Toolbar 컴포넌트에 전달하여 로그인 여부에 따라 Toolbar에 적절한 인터페이스가 표시되도록 한다.

 

이제 만든 LandingPage 컴포넌트를 실제 화면에 렌더링하기 위해서 index.js 파일을 수정한다.

실행 결과

로그인 버튼을 눌러보겠다.

로그인 상태가 true로 바뀌면서 환영 메시지가 표시되고, 로그아웃 버튼이 나온다. 

로그아웃을 누르면 원래대로 나온다.

---

- <강좌> 처음 만난 리액트

https://www.inflearn.com/course/

[무료] 처음 만난 리액트(React) - 인프런 | 강의