custom component, Parent/child component

저번시간에 page라는 variable를 render해준거와 다르게
custom component로 이렇게 만들어줄 수 있다.

import React from "react"
import ReactDOM from "react-dom"

function TemporaryName() {
    return (
        <div>
            <img src="./react-logo.png" width="40px" />
            <h1>Fun facts about React</h1>
            <ul>
                <li>Was first released in 2013</li>
                <li>Was originally created by Jordan Walke</li>
                <li>Has well over 100K stars on GitHub</li>
                <li>Is maintained by Facebook</li>
                <li>Powers thousands of enterprise apps, including mobile apps</li>
            </ul>
        </div>
    )
}

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

function 그리고 return으로 저렇게 적어주고
참고로 function 이름은 camel로 적으면 안되고
꼭 저렇게 맨처음 글자도 대문자로 써줘야 한다.
그리고 또 알아두어야 하는건 render할때 function 불러오는걸
TemporaryName()이렇게 안하고 이렇게 적어준다는것.

밑의 퀴즈..내가 답한것과 모범답안

Quiz!

1. What is a React component?
   React component is what we broke things down so it can be composed all together later
   A function that returns React elements. (UI)
   여기서 react element는 jsx를 말한다.

2. What's wrong with this code?

function myComponent() {
    return (
        <small>I'm tiny text!</small>
    )
}

You didn't render it so it can be on the screen
It should be MyComponent

3. What's wrong with this code?

function Header() {
    return (
        <header>
            <nav>
                <img src="./react-logo.png" width="40px" />
            </nav>
        </header>
    )
}

ReactDOM.render(Header(), document.getElementById("root"))

it shouldn't be Header()but

.. when you render a function on react there is a rule.
you need to follow it.

It should be myComponent

아래와 같은 코드가 있다고 하자

function Page() {
 return (
   <div>
     <header>
       <nav>
         <img src="./react-logo.png" width="40px" />
       </nav>
     </header>
     <h1>Reasons I'm excited to learn React</h1>
     <ol>
       <li>
         It's a popular library, so I'll be able to fit in with the cool kids!
       </li>
       <li>I'm more likely to get a job as a developer if I know React</li>
     </ol>
     <footer>
       <small>© 2021 Ziroll development. All rights reserved.</small>
     </footer>
   </div>
 );
}

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

여기에서 header부분만 빼서 따로 component로 만들어줄 수 있다
아래처럼

function Header() {
  return (
    <header>
      <nav>
        <img src="./react-logo.png" width="40px" />
      </nav>
    </header>
  );
}

그리고 아래는 header부분을 빼줬으니까

function Page() {
  return (
    <div>
      <Header/>
      <h1>Reasons I'm excited to learn React</h1>
      <ol>
        <li>
          It's a popular library, so I'll be able to fit in with the cool kids!
        </li>
        <li>I'm more likely to get a job as a developer if I know React</li>
      </ol>
      <footer>
        <small>© 2021 Ziroll development. All rights reserved.</small>
      </footer>
    </div>
  );
}

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

위에 빼준 header component는

이렇게 render page component안에서 render 해줄 수 있다.

이런식으로 footer도 따로 component만들어주고
main content도 따로 만들어주면

function Header() {
    return (
        <header>
            <nav>
                <img src="./react-logo.png" width="40px" />
            </nav>
        </header>
    )
}

function Footer() {
    return (
        <footer>
            <small>© 2021 Ziroll development. All rights reserved.</small>
        </footer>
    )
}

function MainContent() {
    return (
        <div>
            <h1>Reasons I'm excited to learn React</h1>
            <ol>
                <li>It's a popular library, so I'll be 
                able to fit in with the cool kids!</li>
                <li>I'm more likely to get a job as a developer
                if I know React</li>
            </ol>
        </div>
    )
}

function Page() {
    return (
        <div>
            <Header />
            <MainContent />
            <Footer />
        </div>
    )
}

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

여기서 Page()이게 parent component이고

,, 이게 child component이다