- React로 component를 만드는 방법은 class와 function을 사용하는 두가지 이다.
클래스 스타일
은 모든 기능을 사용할 수있지만 복잡하다.
함수 스타일
은 기능은 제한적이지만 단순하다. 하지만 최신 함수 스타일
에는 hook
기능이 추가되면서 클래스 방식
에 버금가는 component
를 만들 수 있게 됬다.
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>hello world</h1>
<FuncComp></FuncComp>
<ClassComp></ClassComp>
</div>
);
}
function FuncComp(){
return(
<div className="container">
<h2>Function Style Component</h2>
</div>
);
}
class ClassComp extends React.Component{
render(){
return(
<div className="container">
<h2>Class Style Component</h2>
</div>
);
}
}
export default App;
props
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>hello world</h1>
<ClassComp initNumber={2}></ClassComp>
<FuncComp initNumber={2}></FuncComp>
</div>
);
}
Class style
class ClassComp extends React.Component{
render(){
return(
<div className="container">
<h2>Class Style Component</h2>
<p>Number: {this.props.initNumber}</p>
</div>
);
}
}
Function Style
function FuncComp(props){
return(
<div className="container">
<h2>Function Style Component</h2>
<p>Number: {props.initNumber}</p>
</div>
);
}
export default App;
state
import React {useState} from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h1>hello world</h1>
<ClassComp initNumber={2}></ClassComp>
<FuncComp initNumber={2}></FuncComp>
</div>
);
}
Class Style
class ClassComp extends React.Component{
state = {
number:this.props.initNumber
}
render(){
return(
<div className="container">
<h2>Class Style Component</h2>
<p>Number: {this.state.number}</p>
<input type="button" value="random" onClick={
function(){
this.setState({number:Math.random()})
}.bind(this)
}>
</input>
</div>
);
}
}
Function Style
function FuncComp(props) {
var numberState = useState(props.initNumber);
var number = numberState[0];
var setNumber = numberState[1];
console.log('numberState', numberState);
return (
<div className="container">
<h2>Function Style Component</h2>
<p>Number: {number}</p>
<input type="button" value="random" onClick={
function () {
setNumber(Math.random());
}
}>
</input>
</div>
);
}
useState()
사용시 배열이 리턴되고 배열안에는 두개의 값이 존재한다. 첫번째는 상태값
두번째는 상태를 바꾸는 함수
이다
state
사용시 두가지 방법이 있는데
- react.useState
를 작성하는방법
- 상단에 import React, { useState } from 'react';
를 작성하고 useState();
를 사용하는 방법