State

App.js

import './App.css';

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

export default App;

counter.js

import React from 'react'

export default function Counter() {
  let count = 0;

  return (
    <div>
      <button onClick={() => (count += 1)}>+1</button><br/> Counter : {count}
    </div>
  )
}

하지만 버튼을 눌러도 따로 숫자값이 변하지 않고 있습니다.

왜냐하면 함수컴포넌트는 단순 함수일 뿐이기 때문입니다. 함수는 어디선가 실행하는 경우 리턴문을 반환하고 종료가 되는 것입니다.

컴포넌트가 상태를 관리한다는 것은 상태값을 변경할 수 있고, 변경되면 그 컴포넌트가 렌더링이 일어나게 할 수 있다는 것을 의미합니다.

이를 위해서는 지금까지 알고 있던 것만으로는 안되며 새로운 함수가 필요합니다. 리액트에서는 Hook함수라는 것들이 여러개 있는데 그 중에 하나인 useState를 사용해보도록 하겠습니다.

useState는 배열을 리턴하며 그 배열에는 두가지 값이 들어있습니다. 따라서 그 값을 디스럭처링 해서 두가지 값을 가지고 올 수 있습니다.

  //값, 값을 변경할 때 쓰는 함수
const [state, setState] = useState(초기값);

import React, {useState} from 'react'

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>                            //상태값을 업데이트할 값
      <button onClick={() => setCount(count + 1)}>+1</button><br/> Counter : {count}
    </div>
  )
}

🍀정리

• 함수 컴포넌트는 그냥 함수입니다.
• 만약 함수컴포넌트 내부에서 상태를 관리할 일이 필요한 경우 react의 userState를 사용할 수 있습니다.
• setState의 경우 컴포넌트의 re-rendering을 발생시킵니다.

import {useState} from "react"

const [state, setState] = useState()
//const [관리할 데이터, 변경될 데이터] = useState(초기값)