props practice

props practice한거 코드 예시를 보자

Joke.js

import React from "react"

export default function Joke(props) {
    return (
        <div>
            <h3 style={{display: props.setup ? "block" : "none"}}>Setup: {props.setup}</h3>
            <p>Punchline: {props.punchline}</p>
            <hr />
        </div>
    )
}

Joke.js에 이렇게 props 써주고

App.js

import React from "react"
import Joke from "./Joke"

export default function App() {
    return (
        <div>
            <Joke 
                punchline="It’s hard to explain puns to kleptomaniacs because they always take things literally."
            />
            <Joke 
                setup="I got my daughter a fridge for her birthday." 
                punchline="I can't wait to see her face light up when she opens it." 
            />
            <Joke 
                setup="How did the hacker escape the police?" 
                punchline="He just ransomware!" 
            />
            <Joke 
                setup="Why don't pirates travel on mountain roads?" 
                punchline="Scurvy." 
            />
            <Joke 
                setup="Why do bees stay in the hive in the winter?" 
                punchline="Swarm." 
            />
            <Joke 
                setup="What's the best thing about Switzerland?" 
                punchline="I don't know, but the flag is a big plus!" 
            />
        </div>
    )
}

App.js에서 이렇게 rendering해줌

index.js

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"


ReactDOM.render(<App />, document.getElementById("root"))

index.js부분 scartch 부터 쓰려니까
또 까먹은 나를 발견 ㅠㅠ .... 다시 잘 기억해두자..
이 포스트 보면 다시 기억이 날거임.