User를 State로 만들어 Props로 넘기기
// App.js
import "./styles.css";
import { useState } from "react";
import Body from "./component/Body";
import Header from "./component/Header";
export default function App() {
const [user, setUser] = useState("아저씨");
return (
<div className="App">
<Header user={user} />
<Body user={user} />
</div>
);
}
// Body.js
export default function Body(props) {
return (
<section>
<h1>Welcome back! {props.user}</h1>
</section>
);
}
// Header.js
export default function Header(props) {
return (
<header>
<p>Current user : {props.user}</p>
</header>
);
}
안읽은 메세지 개수 출력하기
import "./styles.css";
import { useState } from "react";
export default function App() {
const [messages, setMessages] = useState(["안녕", "뭐해?"]);
return (
<div className="App">
{messages.length === 0 ? (
<h1>You're all caught up!</h1>
) : (
<h1>
{" "}
You have {messages.length} unread{" "}
{messages.length > 1 ? "messages" : "message"}!
</h1>
)}
</div>
);
}위 코드는 안읽은 메세지가 없으면 You're all caught up!을 출력한다.
그리고 메세지가 하나면 You have a unread message을 출력하고 안읽은 메세지가 2개 이상이면 You have 메세지 개수 unread messages를 출력한다.
