passing state as props

지금까지 배웠던 props랑 state 합쳐서 같이 쓰는 응용된 코드!
연습상 Count.js 만들어서 props해주는걸 연습했다.

Count.js

import React from "react"

export default function Count(props) {
    
    return (
        <div className="counter--count">
            <h1>{props.number}</h1>
        </div>
    )
}

count에 관한걸 여기로 옮겨주고
props를 이용해주고 number로 이름붙여준거임

App.js

import React from "react"
import Count from "./Count"

export default function App() {
    const [count, setCount] = React.useState(0)
    
    function add() {
        setCount(prevCount => prevCount + 1)
    }
    
    function subtract() {
        setCount(prevCount => prevCount - 1)
    }
    
    console.log("App component rendered")
    
    return (
        <div className="counter">
            <button className="counter--minus" onClick={subtract}>–</button>
            <Count number={count} />
            <button className="counter--plus" onClick={add}>+</button>
        </div>
    )
}

App.js에서 Count.js import해주고

 <Count number={count} />

원래 props 배웠던 것처럼 이렇게 써준다.
component 이름 쓰고 props 다음에 써준 이름이랑 그 다음에
그 변하될 값을 넣어주는거...
혼자 하려고 했을 때 props공부가 제대로 안되어있었는지
혼자 구현하기가 힘들었음 ㅠ