React 에서 state는 같은 sibling 애들한테는전달이 안된다고
한다 그래서 전달하려면 parent component로 state를 옮겨줘야한다.
그렇게 옮겨주는연습을 한 코드가 아래와 같다.
Header.js에 있는 state를 App.js에 옮겨주고
이렇게 작성해줌
import React from "react"
import Header from "./Header"
import Body from "./Body"
export default function App() {
const [user, setUser] = React.useState("Joe")
return (
<main>
<Header user={user} />
<Body user={user} />
</main>
)
}Header.js
import React from "react"
export default function Header(props) {
return (
<header>
<p>Current user: {props.user}</p>
</header>
)
}
props 적용해줌 이렇게
Body.js
import React from "react"
export default function Body(props) {
return (
<section>
<h1>Welcome back, {props.user}!</h1>
</section>
)
}
여기도 props 적용해주었다..
