반응형
App.js
import React from "react";
import Hello from "./Hello.js";
import "./App.css";
import Wrapper from "./Wrapper.js";
import Counter from "./Counter.js";
import InputSample from "./InputSample.js";
function App() {
return <Counter />;
}
export default App;
Counter.js
import React, { useState } from "react";
function Counter() {
const [number, setNumber] = useState(0);
const onIncrease = () => {
setNumber(prevNumber => prevNumber + 1);
};
const onDecrease = () => {
setNumber(prevNumber => prevNumber - 1);
};
return (
<div>
<h1>{number}</h1>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
);
}
export default Counter;
반응형
'2020 > React' 카테고리의 다른 글
React useRef로 Dom 선택하기 (0) | 2020.03.31 |
---|---|
InputSample (0) | 2020.03.30 |
React 조건부 렌더링 (0) | 2020.03.30 |
React Children (0) | 2020.03.30 |
첫번째 컴포넌트 (0) | 2020.03.30 |