[React] State

State란

• 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용됩니다.
• 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 합니다.

State 사용법

state의 선언 방법은 아래와 같습니다.

const [state명, state변경 함수] = React.useState(초기값);

//예시
const [value, setValue] = React.useState(0);

state의 값 변경 방법은 아래와 같습니다.

state변경 함수(변경할 값);

//예시
setValue(1);
setValue(value + 1);

• state의 값 변경 시 자동으로 component가 re-rendering됩니다.

function App() {
  const [value, setValue] = React.useState(0);
  const changeValue = () => setValue(value + 1);
  return (
    <div>
      <button onClick={changeValue}>Change Value</button>
      <div>value : {value}</div>
    </div>
  );
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

위와 같이 state값과 이벤트를 JSX문에서 사용할 수 있습니다.

---

---

Reference

노마드 코더 ReactJS로 영화 웹 서비스 만들기
https://nomadcoders.co/react-for-beginners/lobby