2021.09.22
57번째 포스팅
입사 198일차.
리액트쪽에서 Class방식이 아닌 method방식을 계속 종용하고 있고, 그에 맞는 api들을 지원하고 있다.
HooksAPI로의 전환 이후, HooksAPI가 장점만을 가지고 있지는 않다.
이제 다른 라이브러리들에 비해 나은 것이 없다. TypeScript가 더 낫다. 등등의 글들을 읽어볼 수 있다.
하지만, 아직 리액트로 프로젝트 하나 만들어보지 못한 내가 이러쿵저러쿵 입방아를 찧는 것 보다는
리액트를 최고로 만들어준 HooksAPI를 공부한 뒤에 까는 것이 맞지않나싶다.
서론이 길었지만, 결론은 하나다. HooksAPI를 알아보자.
0. 출처
① ZeroCho님의 무료 인프런강좌 (링크)
② Do it! 리액트 프로그래밍 정석 (eBook)
③ 초보자를 위한 Node.js 200제 (오프라인 구매)
1. HooksAPI
① 메서드 형식으로 컴포넌트를 만드는 방법
② 예시 (기본구조 - class방식)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<body>
<div id="main_wrap"></div>
<script type="text/babel">
class HooksAPI extends React.Component {
render() {
return <div>HooksAPI란?</div>
}
}
</script>
<script type="text/babel">
ReactDOM.render(<HooksAPI/>, document.querySelector('#main_wrap'));
</script>
</body>
|
cs |
② 예시 (기본구조 - HooksAPI)
|
1
2
3
4
5
6
7
8
9
10
11
|
<body>
<div id="main_wrap"></div>
<script type="text/babel">
const HooksAPI = () => {
return <div>HooksAPI란?</div>
}
</script>
<script type="text/babel">
ReactDOM.render(<HooksAPI/>, document.querySelector('#main_wrap'));
</script>
</body>
|
cs |
③ 일반적인 arrowFunction처럼 메소드를 선언한 뒤, return에 렌더링 하고 싶은 태그를 작성해준다.
④ 코드가 훨씬 간결하고 가독성이 좋기 때문에 HooksAPI를 선호하는 편이다.
⑤ setState의 동작으로 state의 상태가 변하게되면 메소드 전체가 다시 렌더링된다! >> 속도차이 발생!
2. setState
① Class방식에서는 state = { ... } 처럼 하나의 state안에 변수들을 선언했다.
② HooksAPI에서는 state들을 각각의 객체로 선언한다.
③ 하나의 객체로 선언할 경우, 값을 입력받지 않는 state들의 값이 자동으로 초기화가 되기 때문에 각각의 객체로 선언한다.
③ 예시 (setState - HooksAPI)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<body>
<div id="main_wrap"></div>
<script type="text/babel">
const HooksAPI = () => {
// 1. useState('') 괄호안에 초기값을 입력해서 초기화
// 2. setValue를 통해 값을 입력받음
const [value, setValue] = React.useState('');
return <div>HooksAPI란?</div>
}
</script>
<script type="text/babel">
ReactDOM.render(<HooksAPI/>, document.querySelector('#main_wrap'));
</script>
</body>
|
cs |
3. Up&Down 숫자맞추기 게임 로직을 추가한 HooksAPI 코드
① {this.state.변수}가 아닌 변수이름 그대로 사용한다.
② class에 비해 코드가 훨씬 간결해지고 사용하기도 편하다.
③ Spring MVC에서 사용하는 setter의 개념처럼 set을 사용하면 된다.
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>숫자맞추기 Up&Down</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="main_wrap"></div>
<script type="text/babel">
const NumberUpDown = () => {
const [answer, setAnswer] = React.useState(Math.ceil(Math.random() * 100));
const [value, setValue] = React.useState('');
const [result, setResult] = React.useState('');
const inputRef = React.useRef(null);
// 정답입력받기
const onChangeInput = (e) => {
// Spring MVC의 setter처럼 사용하면 된다.
setValue(e.target.value);
};
// 제출된 숫자와 숨겨진 숫자를 비교해서 result에 표시
const onSubmitForm = (e) => {
e.preventDefault();
if ( parseInt(answer) > parseInt(value) ) {
setResult('Up');
setValue('');
inputRef.current.focus();
}
else if ( parseInt(answer) < parseInt(value) ) {
setResult('Down');
setValue('');
inputRef.current.focus();
}
else {
setResult('정답은 ' + parseInt(answer) + '입니다!');
setAnswer(Math.ceil(Math.random() * 100));
inputRef.current.focus();
}
}
return (
<React.Fragment>
<div>1 ~ 100 사이의 숫자맞추기</div>
<form onSubmit={onSubmitForm}>
<input type="number" ref={inputRef} value={value} onChange={onChangeInput} />
<button type="submit">입력</button>
</form>
<div id="result">{result}</div>
</React.Fragment>
);
}
</script>
<script type="text/babel">
ReactDOM.render(<NumberUpDown/>, document.querySelector('#main_wrap'));
</script>
</body>
</html>
|
cs |
다음포스팅의 주제
[React] ⑦ HTML5 Attribute 비교
2021.09.27 58번째 포스팅 입사 203일차. React는 HTML5에서 사용하는 Attribute들 중, 기능은 같지만 이름이 다르거나 혹은 그 반대의 경우들이 있다.오늘은 그 종류들을 기록해보려고 한다. 0. 출처 ① Zero
limreus.tistory.com
'프론트엔드 > 리액트' 카테고리의 다른 글
| [React] ⑧ WebPack 설치 및 개발환경구성 (1) (0) | 2021.10.04 |
|---|---|
| [React] ⑦ HTML5 Attribute 비교 (0) | 2021.09.27 |
| [React] ⑤ React.Fragment, this, ref (0) | 2021.09.15 |
| [React] ④ <input>태그에 값 입력하기 (1) | 2021.08.16 |
| [React] ③ babel (0) | 2021.08.03 |
댓글