간단하게 버튼을 눌러 count값을 조정하는 프로그램 작성
body {
padding: 20px;
}
.App {
margin: 0 auto;
width: 400px;
}
.App > section {
background-color: rgb(245, 245, 245);
border: 1px solid rgb(240, 240, 240);
border-radius: 5px;
padding: 20px;
margin-bottom: 10px;
}
import "./App.css";
import Viewer from "./components/Viewer";
import Controller from "./components/Controller";
import { useState } from "react";
// 카운트 값을 조정하기 위해선 형제관계의 컴포넌트끼리 props로 전달X
// 부모 컴포넌트 즉, 현재는 App컴포넌트에서 조정하여 전달해야함
// State Lifting이 위와 같은 방법을 이용한 것
// -> 리액트는 단방향 데이터 흐름이므로 직관적임
// -> 따라서 State를 어떤 Component에 위치시킬지 중요함
function App() {
const [count, setCount] = useState(0);
const onClickButton = (value) => {
setCount(count + value);
};
return (
<div className="App">
<h1>Simple Counter</h1>
{/* props로 전달 함 */}
<section>
<Viewer count={count} />
</section>
{/* props로 전달 함 */}
<section>
<Controller onClickButton={onClickButton} />
</section>
</div>
);
}
export default App;
// 객체 구조 분해 할당으로 count 받아옴
const Viewer = ({ count }) => {
return (
<div>
<div>현재 카운트 : </div>
<h1>{count}</h1>
</div>
);
};
export default Viewer;
// 객체 구조 분해 할당으로 onClickButton 받아옴
const Controller = ({ onClickButton }) => {
return (
<div>
<button
onClick={() => {
onClickButton(-1);
}}
>
-1
</button>
<button
onClick={() => {
onClickButton(-10);
}}
>
-10
</button>
<button
onClick={() => {
onClickButton(-100);
}}
>
-100
</button>
<button
onClick={() => {
onClickButton(+100);
}}
>
+100
</button>
<button
onClick={() => {
onClickButton(+10);
}}
>
+10
</button>
<button
onClick={() => {
onClickButton(+1);
}}
>
+1
</button>
</div>
);
};
export default Controller;