conditioning rendering

~가 있으면 ~를 보여줘라 이런 로직으로 짤때의
코드 예시를 한 번 봐보자

Joke.js

import React from "react"

export default function Joke(props) {
    const [isShown, setIsShown] = React.useState(false)
    /**
     * Challenge:
     * - Only display the punchline paragraph if `isShown` is true
     */
    function toggleShown(){
        setIsShown(prevShown => !prevShown)
    }
    return (
        <div>
            {props.setup && <h3>{props.setup}</h3>}
            {isShown && <p>{props.punchline}</p>}
            <button onClick={toggleShown}>Show Punchline</button>
            <hr />
        </div>
    )
}

저기 저렇게 challenge로 써있는걸 구현해줄때 && 써서
isShown이 있으면 나오게 하는에 나오게 해주는거임

비슷한 예시로 아래 코드가 있다

import React from "react"

export default function App() {
    const [messages, setMessages] = React.useState(["a", "b"])
    /**
     * Challenge:
     * - Only display the <h1> below if there are unread messages
     */
    return (
        <div>
            {
                messages.length > 0 && 
                <h1>You have {messages.length} unread messages!</h1>
            }
        </div>
    )
}

message length가 0다 클때 즉 저 array안에 무언가가 있을때만
나오게 코드 짠거다.

삼항연자 쓰는 예시도 있는데 버튼에서 show, hide바꿔지게 할때
이거 사용했다

import React from "react"

export default function Joke(props) {
    const [isShown, setIsShown] = React.useState(false)
    function toggleShown(){
        setIsShown(prevShown => !prevShown)
    }
    
  
    return (
        <div>
            {props.setup && <h3>{props.setup}</h3>}
            {isShown && <p>{props.punchline}</p>}
            <button onClick={toggleShown}>{isShown ? "Hide" : "Show"} Punchline</button>
            <hr />
        </div>
    )
}

위에 애들을 응용해서 푼 challenge 코드

import React from "react"

export default function App() {
    const [messages, setMessages] = React.useState(["a", "b"])
    /**
     * Challenge:
     * - If there are no unread messages, display "You're all caught up!"
     * - If there are > 0 unread messages, display "You have <n> unread
     *   message(s)"
     *      - If there's exactly 1 unread message, it should read "message"
     *        (singular)
     */
    return (
        <div>
            {
                messages.length === 0 ?
                <h1>You're all caught up!</h1> :
                <h1>You have {messages.length} unread {messages.length > 1 ? "messages" : "message"}</h1>
            }
        </div>
    )
}

h1 넣어줘야 하는걸 혼자 풀때는 깜빡했고
message와 messages 나오게 하는거 혼자서 구현 못함 ㅠㅠ
에휴 .. 점점 혼자 challenge 해결 못하는게 늘어나고 있네
일단 한 번 쭉 강의 듣고 다시 들으면서 익혀야겠다..
일단은 한 번 돌리는걸로 가자
다음은 관련 퀴즈다

1. What is "conditional rendering"?
   When we want to only sometimes display something on the page
   based on a condition of some sort

2. When would you use &&?
   When you want to either display something or NOT display it

3. When would you use a ternary?
   When you need to decide which thing among 2 options to display

4. What if you need to decide between > 2 options on
   what to display?
   Use an if...else if... else conditional or a switch statement

function App() {
    let someVar
    if () {
        someVar = <SomeJSX />
    } else if() {
        ...
    } else {
        ...
    }
    return (
        <div>{someVar}</div>
    )
}

if else 써야 할때는 이런 모양으로 사용하면 됨