고정 헤더 영역
상세 컨텐츠
본문
반응형
리액트[React]_함수컴포넌트와 useState를 활용한 구구단 프로그램 만들기(feat. Fragment 활용)
오늘은 리액트 함수컴포넌트와 useState를 활용하여 구구단 프로그램을 만들어보고 더욱 깔끔한 클린코딩을 위한 Fragment활용에 대해서도 함께 알아보도록 하겠습니다.
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
'use strict'
function ReactButton() { // 함수컴포넌트
// 구조분해
const [Liked, setLiked] = React.useState(false);
// 무엇으르 하든 결국 return 하는 것은 화면이다.
if(liked) {
return 'React Message When You Click On Button!';
}
return (
<button onClick={() =>{ setLiked(true); }}>Like</button>
)
}
</script>
<script type="text/babel">
ReactDOM.createRoot(document.querySelector('#root')).render(<ReactButton />); // React18버전코드
</script>함수 컴포넌트 생성 과정 및 방법
- 위처럼 함수를 하나 만들고 const를 통해 변수를 만든다.
- const에 [useState(변수), setuseState(저정할 변수값)] = React.useState(['1', '2', '3', '4', '5',])
- if(useState) 를 통해 조건을 만들어 줄 수 있다. 즉, useState일떄 return에 무엇을 표시할지 정한다.
- 마지막 retrun에는 조건문에도 걸리지 않는 다른 기본값을 화면에 표시에 준다.
※ 함수 컴포넌트를 사용하면 .this를 사용하지 않아도 된다.
// useState 사용방법
const [news, setNews] = React.useState(['뉴스1','뉴스2','뉴스3','뉴스4','뉴스5'])
const [category, setCategory] = React.useState(['스포츠','연예','경제','시사','정치'])
if(category === '스포츠') {
return '스포츠화면';
}
return (
<button onClick={() =>{ setCategory('스포츠'); }}>SPORTS</button>
)useState를 잘 활용하고 브라우저 화면상으로 보았을때 useState의 구성을 대충 짐작할 수 있어야 좋은 리액트 개발자가 될 수 있다.
- useState를 사용하여 원하는 배열을 만들고 원하는 컴포넌트들을 불어올 수 있다.
- setState를 활용해 useState에 저장된 값을 변환하고 그 값을 새로이 저정하여 불어올 수 있다.
여러가지 이벤트리스너의 종류
onClick 이외에도 onChange, onKeyup, onKeydown, onLoad, onblur, onKeypress 등 여러가지 이벤트들을 활용할 수 있다.
아래의 코드를 복사하면 구구단 게임을 만들어 볼 수 있습니다.
<html>
<head>
<meta charset="UTF-8"/>
<title>구구단</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
'use strict';
const GuGuDan = () => {
const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
const inputEl = React.useRef(null);
const onSubmitForm = (e) => {
e.preventDefault();
if (parseInt(value) === first * second) {
setResult('정답입니다.');
setFirst(Math.ceil(Math.random() * 9));
setSecond(Math.ceil(Math.random() * 9));
setValue('');
inputEl.current.focus();
} else {
setResult('정답이 아닙니다.');
setValue('');
inputEl.current.focus();
}
};
return (
<React.Fragment>
<div>{first} 곱하기 {second}는?</div>
<form onSubmit={onSubmitForm}>
<input
ref={inputEl}
type="number"
value={value}
onChange={(e) => setValue(e.target.value)}
/>
<button>정답제출</button>
</form>
<div id="result">{result}</div>
</React.Fragment>
);
};
</script>
<script type="text/babel">
ReactDOM.createRoot(document.querySelector('#root')).render(<GuGuDan/>);
</script>
</body>
</html>중요한 포인트
onChange={(e) => setValue(e.target.value)} 에서 빈공백 ' '로 만들어져 있는 useState 의 value 상태를 onChange를 통해 이벤트 리스너와 함께 value의 값이 변화할때 같이 setValue(e.target.value)를 실행하여 setValue로 value상태를 바꿔주는 부분이다.
구구단게임의 코드리뷰
- div 태그에 id 값 root를 주어 화면을 위한 그림판을 준비한다.
- GuGuDan이라는 함수 컴포넌트를 하나 만들어준다.
- GuGuDan 이라는 함수 컴포넌트 안에 useState를 이용해 사용할 변수들을 지정해 준다.
- const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
const inputEl = React.useRef(null); // useRef - 컴포넌트 수정, 조회만 한다.
- const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
- onSubmitForm 이라는 함수를 만들고 조건문을 설정해 줍니다.
- const onSubmitForm = (e) => {
e.preventDefault();
if (parseInt(value) === first * second) { // 적은 값이 useState의 first와 second의 곱과 같은지 비교하면 true
setResult('정답입니다.');
setFirst(Math.ceil(Math.random() * 9)); // 1~9까지 랜덤 숫자를 first 변수에 새로이 지정한다.
setSecond(Math.ceil(Math.random() * 9)); // 1~9까지 랜덤 숫자를 second 변수에 새로이 지정한다.
setValue(''); // 적은 value의 값은 초기화한다.
inputEl.current.focus();
} else {
setResult('정답이 아닙니다.'); // 적은 값이 useState의 first와 second의 곱과 같은지 비교하면 false
setValue(''); // 적은 value의 값은 초기화한다.
inputEl.current.focus(); // inputEl 에 포커스를 둡니다.
}
};
- const onSubmitForm = (e) => {
- 브라우저 화면에 표시할 HTML 태그와 필요한 자바스크립트 변수를 { } 이용하여 가져옵니다.
- return (
<React.Fragment> // Fragment를 이용하여 태그들을 한번에 감싸주어 에러를 방지한다.
<div>{first} 곱하기 {second}는?</div>
<form onSubmit={onSubmitForm}>
<input
ref={inputEl} // 참조로써 id 와 같은 개념
type="number" // 타입
value={value} // 입력한 값. 실시간으로 렌더될때마다 useState 가 바뀜
onChange={(e) => setValue(e.target.value)} // 중요!!
/>
<button>정답제출</button>
</form>
<div id="result">{result}</div>
</React.Fragment>
);
- return (
- 마지막으로 root라는 id를 가진 태그요소에 GuGuDan이라는 이름을 가진 컴포넌트를 붙여 브라우저 화면에 렌더링 한다.
- <script type="text/babel">
ReactDOM.createRoot(document.querySelector('#root')).render(<GuGuDan/>);
</script>
- <script type="text/babel">
반응형
'웹 > React' 카테고리의 다른 글
| 리액트[React]_리액트기초_구성요소 및 바벨라이브러리_리액트17버전과 리액트18버전의 차이 (0) | 2023.02.19 |
|---|---|
| 리액트[React]_DOM(Document Object Model)과 Document.ready와 Window.onload의 차이 (0) | 2023.02.18 |
