react component, props, state 실습하기
하트 버튼을 누르면 숫자가 하나씩 더해지는 카운터를 만들었다.
import './App.css';
import {useState} from 'react';
function Counter(props){
let countState = useState(props.initValue);
let count = countState[0];
let setCount = countState[1];
function up(){
console.log(1)
setCount(count+1);
}
return <div>
<h1>{props.title}</h1>
<button onClick={up}>❤️</button> {count}
</div>
}
function App() {
return (
<div >
<Counter title="Counter" initValue={0}></Counter>
</div>
);
}
export default App;
props를 사용해 title과 initValue를 설정
useState를 이용해 증가하는 카운터로 설정
: State의 배열의 첫번째 원소는 현재 상태를 나타냄.
initValue에서 초기 상태를 저장. → Counter의 현재 상태는 initValue → countstate 배열의 첫번째 원소는 현재상태, 두 번째 원소는 다음 상태 → up함수에서 count 증가 → 다음 상태인 setCount에 update → 이전의 원소값과 현재의 원소값이 다르면 Counter함수 재실행
위의 과정이 반복되면서 count 숫자가 증가함.