React.js 기초 #4 State

#4 State
: 계속해서 변화하는 특정 상태
- 상태에 따라 각각 다른 동작을 한다.
- Component의 상태(state)가 변화하면 rerender, 즉 다시 호출된다.
 
< 예제 >

//Counter.js

import React, { useState } from "react";

const Counter = () => {
  // 0에서 출발
  // 1씩 증가
  // 1씩 감소
  // count 상태

  // const [변수, 상태 변화 함수] = useState(초기값)
  const [count, setCount] = useState(0); 

  const onIncrease = () => {
    setCount(count + 1);
  };

  const onDecrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
      <button onClick={onDecrease}>-</button>
    </div>
  );
};

export default Counter;

//App.js

import "./App.css";
import Counter from "./Counter";
import MyHeader from "./MyHeader";

function App() {
  return (
    <div className="App">
      <MyHeader />
      <Counter />
    </div>
  );
}

export default App;

 
 

 

---

이정환님의 인프런 강의 "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지"를 참고하여 작성하였습니다.