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 숫자가 증가함.