지금까지 공부한 내용으로 결혼식장이나 행사에 참여하는 인원을 세는 카운트 앱을 만들려고 한다
아래 세 개 내용만 나올 듯
https://mm-study-front.tistory.com/38
[React.js] State
사물이 현재 가지고 있는 형태나 모양 사물에 따라 현재 상태는 다르고, 상태를 바꿀 수도 있음 리액트 컴포넌트는 State를 가지고 있음한 컴포넌트에 state를 여러 개 가지고 있을 수도 있음
mm-study-front.tistory.com
https://mm-study-front.tistory.com/40
[React.js] 실습1. 간단한 정보기입 폼
지금까지 배운 걸로 간단하게 정보기입 폼 만들기 나는 이름, 생년월일, 국적, 성별선택, 가입하게 된 계기를 넣을 예정이다 useState 사용할 예정 우선 메인페이지 App.js에 Information 인 컴포넌
mm-study-front.tistory.com
https://mm-study-front.tistory.com/33
[React.js] React 컴포넌트 만들기
*컴포넌트 만들 때 주의사항컴포넌트 이름인 함수명과 변수명의 첫 글자를 대문자로 쓰기 → 소문자는 리액트가 컴포넌트라고 인식하지 않음 1. 함수 컴포넌트function 함수명 () { return( 컴
mm-study-front.tistory.com
우선 나는
App.jsx로 부모컴포넌트이자 제목이 나오는 화면을 구현하고
Button.jsx로 자식컴포넌트인 인원수 추가를 누르는 버튼들을 모아놓을 것이다
display.jsx로 카운트되는 상태값이 보이게 만들 것이다.
App.jsx
import "./App.css";
import { useState } from "react";
import Display from "./components/Display";
import Button from "./components/Button";
function App() {
const [count, setCount] = useState(0);
const onClickButton = (value) => {
setCount(count + value);
};
return (
<>
<section className="App">
<h1>인원수 세기</h1>
<section>
<Display count={count} />
</section>
<section className="buttons">
<Button onClickButton={onClickButton} />
</section>
</section>
</>
);
}
export default App;
Display와 Button은 컴포넌트로 불러오고
Button은 css 다뤄야 할 것이 있어서 따로 className을 주었다
그리고 Display와 Button 컴포넌트가 상태값을 주고받아야 하는데
부모자식 관계가 아닌 형제 관계라서 상태값을 주고받을 수가 없다
그래서 useState 함수를 App.jsx에서 실행해 props로 Display, Button모두 값을 받을 수 있게 짰다
Display.jsx
const Display = ({ count }) => {
return (
<div>
<div>현재 입장한 인원의 수는 :</div>
<h1>{count}</h1>
</div>
);
};
export default Display;
Button.jsx
const Button = ({ onClickButton }) => {
return (
<div>
<button
onClick={() => {
onClickButton(-30);
}}
>
-30
</button>
<button
onClick={() => {
onClickButton(-10);
}}
>
-10
</button>
<button
onClick={() => {
onClickButton(-1);
}}
>
-1
</button>
<button
onClick={() => {
onClickButton(+1);
}}
>
+1
</button>
<button
onClick={() => {
onClickButton(+10);
}}
>
+10
</button>
<button
onClick={() => {
onClickButton(+30);
}}
>
+30
</button>
</div>
);
};
export default Button;
중복된 코드는 최대한 피하고 싶었지만 각 버튼마다 값이 다르게 작용해야 해서
onClickButton 함숫값을 각자 값을 주었다
App.css
body {
box-sizing: border-box;
padding: 20px;
}
.App {
margin: 0 auto;
width: 400px;
}
.App > h1 {
text-align: center;
}
.App > section {
background-color: rgb(254, 249, 249);
border-radius: 10px;
padding: 40px;
margin-bottom: 30px;
}
.App > section h1 {
font-size: 40px;
}
.App .buttons {
padding: 0;
}
.App .buttons div {
width: 400px;
height: 40px;
}
.App .buttons div button {
width: 66px;
height: 60px;
border: 1px solid rgb(111, 111, 111);
background-color: #353534;
color: rgb(245, 245, 245);
font-size: 17px;
}
최종 구현 화면
* 추가로 인원 제한이 있는 경우에는
if 함수로 더 이상 카운트가 안되게 해 주기