728x90
반응형
2021.08.16
55번째 포스팅
입사 161일차.
React에서는 html에서 쓰던 것처럼 <input>태그를 만들면 값이 입력되지도 않고 바뀌지도 않는다.
값을 입력하거나 수정하는 것 뿐이지만 이벤트를 만들어줘야 한다.
ZeroCho님의 무료강의의 첫번째 실습예제인 '1-6 구구단 리액트로 만들기' 강좌를 보고
소수판별 페이지를 만들어보기로 했다. 구구단 만들기와 같은 구조로 짜봤고, 소수판별 로직만 추가로 만들어봤다.
0. 출처
① ZeroCho님의 무료 인프런강좌 (링크)
② Do it! 리액트 프로그래밍 정석 (eBook)
③ 초보자를 위한 Node.js 200제 (오프라인 구매)
1. <input>태그에 값 입력하는 이벤트
① 기본적인 태그들을 만들어 렌더링해준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<html>
<head>
<!-- 한글 인코딩 -->
<meta charset="UTF-8" />
<title>소수판별하기</title>
<!-- React의 핵심기능 (스크립트, 배포시 react.production.js로 수정필요) -->
<!-- <script crossorigin src="https://unpkg.com/react@16/umd/react.production.js"></script> -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!-- ReactDOM (Document Object Model) 작성한 React코드를 WEB에 렌더링 (화면을 구현) -->
<!-- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.js"></script> -->
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- babel -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="body_wrap"></div>
<script type="text/babel">
class PrimeNumber extends React.Component {
// 클래스는 기본적으로 consturctor()를 가진다. (생성자)
// 컴포넌트가 실행될때 가장 먼저 실행된다.
constructor(props) {
super(props);
// state 초기화
// ex) liked: false,
// 변수도 작성가능
this.state = {
};
}
// 화면을 그리는 부분
// ex) <button ~~ ></>
render() {
return (
<div>
<div>소수판별하기</div>
<form>
<input type="number" />
<button type="submit">확인</button>
</form>
</div>
);
}
}
// 클래스 메소드 작성
</script>
<script type="text/babel">
// ReactDOM을 이용해서 렌더링
// root에 작성한 코드를 붙여서 렌더링
// ReactDOM.render(<div><StartLesson02 /><showConsole01 /></div>, document.querySelector('#index_pge'));
ReactDOM.render(<div><PrimeNumber /></div>, document.querySelector('#body_wrap'));
</script>
</body>
</html>
|
cs |
② 위의 코드에서는 <input>태그에 값을 입력할 수 있지만, {state}를 value로 입력하는 순간부터 문제가 발생한다.
③ 화면에서 상태(=state)가 바뀌는 값들에 대해 this.state ={ ... } 안에 변수로 만들어준다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<html>
<head>
</head>
<body>
<div id="body_wrap"></div>
<script type="text/babel">
class PrimeNumber extends React.Component {
constructor(props) {
super(props);
this.state = {
// 소수인지 판별할 숫자 input값 초기화
inputTry: '',
// 소수인지 판단하는 결과표시 ( '소수입니다' / '소수가 아닙니다' )
result: '',
};
}
render() {
return (
<div>
<div>소수판별하기</div>
<form>
<input type="number" />
<button type="submit">확인</button>
</form>
<div>
<span>정답 : </span>
</div>
</div>
);
}
}
</script>
</body>
</html>
|
cs |
④ 렌더링되는 <input>태그와 소수여부의 결과를 표시해줄 <span>태그에 state를 초기값으로 작성해준다.
이때부터 <input> 태그의 값을 수정할 수 없다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render() {
return
(
<div>
<div>소수판별하기</div>
<form>
<input type="number" value={this.state.inputTry} />
<button type="submit">확인</button>
</form>
<div>
<span>정답 : {this.state.result}</span>
</div>
</div>
);
}
}
|
cs |
⑤ <input> 태그에 값을 입력할 수 있도록 onChange() 또는 onInput() 이벤트를 만들어준다.
state가 바뀔때는 setState를 사용해야만 한다!
|
1
|
<input type="number" value={this.state.inputTry} onChange={(e) => this.setState({ inputTry: e.target.value })
|
cs |
⑥ 완성된 코드 확인
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<html>
<head>
<meta charset="UTF-8" />
<title>소수판별하기</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="body_wrap"></div>
<script type="text/babel">
class PrimeNumber extends React.Component {
constructor(props) {
super(props);
this.state = {
inputTry: '',
result: '',
};
}
render() {
return (
<div>
<div>소수판별하기</div>
<form>
<input type="number" value={this.state.inputTry} onChange={(e) => this.setState({ inputTry: e.target.value })} />
<button type="submit">확인</button>
</form>
<div>
<span>정답 : {this.state.result}</span>
</div>
</div>
);
}
}
// 클래스 메소드 작성
</script>
<script type="text/babel">
ReactDOM.render(<div><PrimeNumber /></div>, document.querySelector('#body_wrap'));
</script>
</body>
</html>
|
cs |
2. 메소드 분리하기 / 따로 작성하기
① 메소드의 이름을 정의한 뒤, 이벤트 = {} 안의 값들을 복사한다.
( ex_ onChange={(e) => this.setState({ inputTry: e.target.value })} 파란색 부분을 복사한다. )
② render() { ... } 위에 메소드의 이름을 적은 후, 복사한 코드를 그대로 작성해준다.
|
1
|
inputVal = (e) => this.setState({ inputTry: e.target.value });
|
cs |
③ 복사했던 코드의 위치에 따로 만들어놓은 메소드를 적어준다.
|
1
|
<input type="number" value={this.state.inputTry} onChange={this.inputVal} />
|
cs |
3. 소수판별 메소드를 추가한 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<html>
<head>
<meta charset="UTF-8" />
<title>소수판별하기</title>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="body_wrap"></div>
<script type="text/babel">
class PrimeNumber extends React.Component {
constructor(props) {
super(props);
this.state = {
inputTry: '',
result: '',
};
}
// 클래스 메소드 작성
inputVal = (e) => this.setState({ inputTry: e.target.value });
// 소수체크 로직
chkPrimeNum = (e) => {
e.preventDefault();
// 2미만 또는 100이상의 숫자를 입력할 경우 경고창표시 후, input값 초기화
if ( parseInt(this.state.inputTry) >= 100 || parseInt(this.state.inputTry) < 3) {
alert('3미만 또는 100이상의 숫자는 입력할 수 없습니다.');
this.setState({
inputTry: '',
});
return false;
}
// 소수체크 로직
let idx = 0;
for (idx = 2; idx <= parseInt(this.state.inputTry) / 2; idx++) {
if (parseInt(this.state.inputTry) % idx == 0) {
this.setState({
inputTry: '',
result: this.state.inputTry + '은(는) 소수가 아닙니다.',
});
return false;
}
this.setState({
result: this.state.inputTry + '은(는) 소수입니다',
});
}
}
render() {
return (
<div>
<div>소수판별하기</div>
<form onSubmit={ this.chkPrimeNum }>
<input type="number" value={this.state.inputTry} onChange={this.inputVal} />
<button type="submit">확인</button>
</form>
<div>
<span>정답 : {this.state.result}</span>
</div>
</div>
);
}
}
</script>
<script type="text/babel">
ReactDOM.render(<div><PrimeNumber /></div>, document.querySelector('#body_wrap'));
</script>
</body>
</html>
|
cs |
다음포스팅의 주제
728x90
반응형
'프론트엔드 > 리액트' 카테고리의 다른 글
| [React] ⑥ HooksAPI (0) | 2021.09.22 |
|---|---|
| [React] ⑤ React.Fragment, this, ref (0) | 2021.09.15 |
| [React] ③ babel (0) | 2021.08.03 |
| [React] ② 클래스 컴포넌트 (Class Component) (0) | 2021.08.01 |
| [React] ① React가 주목받게 된 이유 (0) | 2021.07.19 |
댓글