2024. 6. 15. 18:35ㆍReact.js
지금까지 공부한 내용으로 결혼식장이나 행사에 참여하는 인원을 세는 카운트 앱을 만들려고 한다
아래 세 개 내용만 나올 듯
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
Display와 Button은 컴포넌트로 불러오고
Button은 css 다뤄야 할 것이 있어서 따로 className을 주었다
그리고 Display와 Button 컴포넌트가 상태값을 주고받아야 하는데
부모자식 관계가 아닌 형제 관계라서 상태값을 주고받을 수가 없다
그래서 useState 함수를 App.jsx에서 실행해 props로 Display, Button모두 값을 받을 수 있게 짰다
Display.jsx
Button.jsx
중복된 코드는 최대한 피하고 싶었지만 각 버튼마다 값이 다르게 작용해야 해서
onClickButton 함숫값을 각자 값을 주었다
App.css

* 추가로 인원 제한이 있는 경우에는
if 함수로 더 이상 카운트가 안되게 해 주기
'React.js' 카테고리의 다른 글
[React.js] 라이프사이클(생애주기) (78) | 2024.06.19 |
---|---|
[React.js] useEffect (87) | 2024.06.16 |
[React.js] React Hooks (0) | 2024.06.12 |
[React.js]useRef (0) | 2024.06.11 |
[React.js] 비슷한 구조의 state 다루기 (1) | 2024.06.10 |