소플의 처음 만난 리액트_실습7

소플의 처음 만난 리액트_실습7

---

조건부 렌더링이란?

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

 

엘리먼트 변수

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

 

인라인 조건

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

- 인라인 if

　→ 논리 연산자 &&를 사용

　→ 앞에 나오는 조건문이 true일 경우에만 뒤에 나오는 엘리먼트를 렌더링

- 인라인 if-Else

　→ 삼항 연산자 ?를 사용

　→ 앞에 나오는 조건문이 true면 첫 번째 항목을 리턴, false면 두 번째 항목을 리턴

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

 

컴포넌트 렌더링 막기

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

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

---

로그인 여부를 나타내는 툴바 만들기 실습

//Toolbar.jsx
import React from "react";

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

function Toolbar(props) {
    const {isLoggedIn, onClickLogin, onClickLogout} = props;

    return(
        <div style={styles.wrapper}>
            {isLoggedIn && <span style={styles.greeting}>환영합니다!</span>}

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

&&나 ?를 사용해서 조건부 렌더링!!

isLoggedIn 상태가 true면 환영합니다! 문구가 style이 입혀져서 화면에 출력된다.

isLoggedIn이 true면 로그아웃버튼이 나오고, false면 로그인버튼이 나온다.

 

//LandingPage.jsx
import React,{useState} from "react";
import Toolbar from "./Toolbar";

function LandingPage(props) {
    const [isLoggedIn, setIsLoggedIn] = useState(false);
	
    //로그인 버튼을 누르면 setIsLoggedIn상태가 true로 변한다.
    const onClickLogin = () => {
        setIsLoggedIn(true);
    };
	
    //로그아웃 버튼을 누르면 setIsLoggedIn상태가 false로 변한다.
    const onClickLogout = () => {
        setIsLoggedIn(false);
    };

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

useState를 사용해서 로그인 여부를 자체적으로 관리

 

(왼) 초기화면 or 로그아웃 버튼 눌렀을때/ (오) 로그인 버튼 눌렀을 때