심재운 블로그

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);


이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. https://academy.nomadcoders.co/courses/565213/lectures/10221350
    2019.09.02 00:48 신고