useState 와 Hook

Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태값과 여러 React의 기능을 사용할 수 있게된다.
-> Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수, 함수형 컴포넌트에서 상태값을 사용할 수 있고 자식요소에 접근할 수 있음


useState 는 React의 훅 중 가장 기본적인 훅인다.

useState 란?

• useState는 컴포넌트에서 state값을 추가할 때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어준다.
  
  
• 하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있어 만약에 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러번 사용해야한다.
  
  

---

사용법

1. Import 해오기

import React, { useState } from 'react';

2.useState 선언하기

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

• const [state,setState]

  useState()가 호출되면 배열을 반환하는데, 그 배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 업데이트하는 함수이다. 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링 된다.

• setState

  count값을 업데이트하는 함수. 클래스 컴포넌트에서의 this.setState는 이전 state와 새로운 state를 합치지만 얘는 이전값을 덮어쓴다.

• useState(0)

  숫자 0은 초기값을 의미. useState는 인자로 초기 state 설정값을 하나 받는다. 이 초기값은 첫 번째 렌더링 시에 딱 한 번 사용된다.

3.setState 를 사용해 상태값 변경하기

function Example() { 

const [count, setCount] = useState(0); 		// "count"라는 새로운 상태 값을 정의

return (
    <div> 
        <p> You clicked {count} times</p> 
        <button onClick={() =>         
            setCount(count + 1)         //setCount 로 count의 상태 값 변경
        }> Click me </button> 
    </div> ); 
}