[React] useState

State?

컴포넌트가 가질 수 있는 상태이다. 시간이라는 컴포넌트가 있다면 state로 현재 시간을 가질 수 있다. 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬수 있다.
사용하기 위해 import를 해야한다

import { useState } from 'react';

변수선언

state의 생성과 동시에 가져야 할 초기값을 state함수의 인자로 넣어주면 state와 state라는 두 가지 요소를 배열 형태로 리턴해준다

const[state, setState] = useState(초기값)

변수 재선언

state의 값을 변경하려면 인자에 변경될 값을 넣어주면 된다

setState(1); // state의 값을 1로 변경

import React, { useState } from 'react';
// useState Hook을 react에서 가져온다 
 2:
 3:  function Example() {
 4:    const [count, setCount] = useState(0);
   // [state변수와, 해당 state를 갱신할 수 있는 함수] =. useState(0)
   // 인자 값 0을 넘겨주면 count 값을 0으로 초기화 할 수 있다 
   			
 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>
    //버튼을 클릭하면 setCount함수를 호출하여 state변수를 갱신한다 
   // 새로운 count 변수를 Example 컴포넌트에 넘기며 해당 컴포넌트를 리렌더링한다
10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

배열 구조 분해

const [fruit, setFruit] = useState('banana');

fruit과 setFruit, 총 2개의 값을 만들고 useState를 사용하면 fruit 첫 번째 값과 setFruit라는 두 번째 값을 반환한다