[React] 제로초님 리액트 기본강좌 2-1 정리 Class 와 React hooks의 차이

Class

<script type="text/babel"> // 결과: <div id="root"><button>Like</button></div>
class Gugudan extends React.Component {
state = {
frist: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
//value: '', 의 뜻: 입력하고 버튼을 눌렀을때 입력창이 빈칸으로 된다
result: '',
};

onSubmit = (e) => {
e.preventDefault();
if (parseInt(this.state.value) === this.state.frist * this.state.second) {
this.setState((prevState) => {
return {
result: '딩동댕~ ' + prevState.value + '를 맞춘 당신은!!! 천.재!!!',
frist: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
};
});
} else {
this.setState({
result: '삐-삑 다시 생각해보라 오바 (-,,-)',
value: '',
// 빈칸으로 바뀌는거랑 정답인지 아닌지의 글자만 바뀌게 한다.
}); this.input.focus();
}
};
//긴 함수식을 따로 뺐을 때는 function 아니고 화살표함수로 무조건쓰기.

onChange = (e) => {
this.setState({ value: e.target.value });
};
//긴 함수식을 따로 뺐을 때는 function 아니고 화살표함수로 무조건쓰기.

input;
//이거와 62줄의 ref={(c) => {this.input = c;}는 포커스가 안풀리게하는 역할.

onRefInput = (c) => {this.input = c; };

//컨텐츠
render() {
return ((((((((((((((
<React.Fragment>
<div>{this.state.frist} 곱하기{this.state.second}는?</div>
<form onSubmit={this.onSubmit}>
<input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange} />
<button type="submit">입력!</button>
</form>
<div>{this.state.result}</div>
</React.Fragment>
))))))))))))));
//이렇게 ()괄호를 많이 줘도 돌아감. 중요한거는 이렇게 하면 알기 쉬울듯

}
}
// render 변할것들에는 state 넣어준다.
//render는 화살표함수 쓸 필요없다
</script>

<script type="text/babel">

React hooks

<script type="text/babel">
// class Gugudan extends React.Component {
// } 이전 컴포넌트 선언방식
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 inputRef = React.useRef(null);

const onSubmitForm = (e) => {
e.prevenDefault();
if (parseInt(value) === frist * second) {
setResult('정답' + 'value');
setFirst(Math.ceil(Math.random() * 9));
setSecond(Math.ceil(Math.random() * 9));
setValue('');
inputRef.current.focus();
} else {
setResult('삐-삑 다시 생각해보라 오바 (-,,-)');
setValue('');
// 빈칸으로 바뀌는거랑 정답인지 아닌지의 글자만 바뀌게 한다.
inputRef.current.focus();
}
};

const onChangeInput = (e) => {
setValue(e.target.value);
};

console.log('렌더링')
return (
<React.Fragment>
<div>{first} 곱하기 {second}는?</div>
<form onSubmit={onSubmitForm}>
<input ref={inputRef} onChange={onChangeInput} value={value} />
<button>입력!</button>
</form>
<div id="result">{result}</div>
</React.Fragment>
);
}
</script>
<script type="text/babel">

리액트 훅스에서 바뀐걸 정리해보면

첫번째.

const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));

=> 설명

[] 안에 처음 first: state

 setFirst : setState

 

두번째.

class에서 

onChange = (e) => {
this.setState({ value: e.target.value });
};

React hooks에서 

const onChangeInput = (e) => {
setValue(e.target.value);
};

setState가 없어지고 setValue

나머지도 적용해보기

이게

if (parseInt(this.state.value) === this.state.frist * this.state.second) {
this.setState((prevState) => {
return {
result: '딩동댕~ ' + prevState.value + '를 맞춘 당신은!!! 천.재!!!',
frist: Math.ceil(Math.random() * 9),
second: Math.ceil(Math.random() * 9),
value: '',
};

 

이렇게

if (parseInt(this.state.value) === this.state.frist * this.state.second) {
setResult('정답' + 'value');
setFirst(Math.ceil(Math.random() * 9));
setSecond(Math.ceil(Math.random() * 9));
setValue('');
this.input.focus();
}

 

세번째.

class에서 

input ref 쓰는 방법.

 

onSubmit = (e) => {
e.preventDefault();
if (parseInt(this.state.value) === this.state.frist * this.state.second) {
this.setState((prevState) => {
return {
생략
};
});
} else {
this.setState({
생략
});
this.input.focus();
}
};
//긴 함수식을 따로 뺐을 때는 function 아니고 화살표함수로 무조건쓰기.


onChange = (e) => {
this.setState({ value: e.target.value });
};
input;

onRefInput = (c) => {this.input = c; };
render() {
return ((((((((((((((
생략
<input ref={this.onRefInput} type="number" value={this.state.value} onChange={this.onChange} />
생략
))))))))))))));
}

이렇게 돔에 접근했던것을 

 

React hooks에서 

const Gugudan = () => {
생략
const inputRef = React.useRef(null);

const onChangeInput = (e) => {
생략
};

const onSubmitForm = (e) => {
e.prevenDefault();
if (parseInt(this.state.value) === this.state.frist * this.state.second) {
생략
inputRef.current.focus();
} else {
setResult('삐-삑 다시 생각해보라 오바 (-,,-)');
setValue('');
// 빈칸으로 바뀌는거랑 정답인지 아닌지의 글자만 바뀌게 한다.
inputRef.current.focus();
}
};

return (<React.Fragment>
<div>{first} 곱하기 {second}는?</div>
<form onSubmit={}>
<input ref={inputRef} onChange={onChangeInput} value={value}/>
<button>입력!</button>
</form>
<div id="result">{result}</div>
</React.Fragment>
);
}


<input ref={inputRef} onChange={onChangeInput} value={value}/>

 

 

리액트 훅스는 또 머시여;; (동공 지진)