React : State & Props

State

React에서 state는 component의 데이터를 나타내는 개념이다. Component는 state(상태)를 가질 수 있어서 이로 인해 컴포넌트의 동작과 표시에 영향을 줄 수 있다.

setState() 메서드를 통해 상태 관리가 되고, 상태 관리는 변동이 가능한 데이터를 다루는 것이다. 다시 한번, 변경이 또는 변동이 가능한 데이터를 다루는 것이 State다.

const [변수 , 함수] = useState(초기값) : 이런 포멧으로 작성된다.

아래 예제를 살펴보면, const [count, setCount] = useState(0) 메서드를 확인할 수 있다. 여기사 useState는 0으로 초기값으로 정해져있고, count라는 변수로 선언되어 있다. 그리고 setCount로 통해 0 + 1증가 할 수 있다.

버튼을 클릭할 때마다 숫자가 증가하는 Counter

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

---

Prop