관리 메뉴

심재운 블로그

react class 와 react hooks 를 활용한 함수형 방식 구현 비교 본문

프로그래밍/ReactJS, React Native

react class 와 react hooks 를 활용한 함수형 방식 구현 비교

재우니 2019. 8. 21. 01:23

react 를 class 방식으로 구현하는 방법이 있고, hooks 을 사용하는 함수형 방식으로 구현이 가능하다.

hooks 로 구현하면 useState(기본값) 을 통해 상태값을 조절 가능하다.

class 보다 hooks 를 활용한 함수형 코딩이 더 간결하면서 가독성이 강하다.



import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
const [item, setItem ] = useState(1);
const incrementItem = () => setItem(item + 1);
const decrementItem = () => setItem(item - 1);

return (
<div className="App">
<h1>Hello {item}</h1>
<h2>Start editingg to see some magic happen!</h2>
<button onClick={incrementItem}>증가</button>
<button onClick={decrementItem}>축소</button>
</div>
);
};

class SampleEx extends React.Component {
state = {
item: 1
};

render() {
const { item } = this.state;
return (
<div className="App">
<h1>Hello {item}</h1>
<h2>Start editingg to see some magic happen!</h2>
<button onClick={this.incrementItem}>증가</button>
<button onClick={this.decrementItem}>축소</button>
</div>
);
}

incrementItem = () => {
this.setState(state => {
return {
item: state.item + 1
};
});
};

decrementItem = () => {
this.setState(state => {
return {
item: state.item - 1
};
});
};
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


1 Comments
댓글쓰기 폼