useState, 가장 기본적인 React-Hooks

useState, useEffect, useReducer

Hook은 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다.

• useState : state의 상태를 관리하는 Hook
• useEffect : 렌더링 직후 작업 설정하는 Hook
• useReducer : useState처럼 state를 관리, 업데이트 할 수 있는 Hook

 

8-1 useState

const Counter = ()=>{
  const [value, setValue] = useState(0)

useState 함수를 호출하면 배열을 반환
첫번째 원소 value = 현재 상태값 변수이고
두번째 원소 setValue = 상태값을 갱신해주는 setter함수다
useState 괄호 안의 값은 초기 상태값이다.

 

// 위 코드와 아래 코드의 의미는 같다. 
// 위의 코드는 구조분해할당 문법을 통해 각 원소를 추출해 사용하는 것이다

const vlaueState = useState(0)
const value = valueState[0] 
const setValue = valueState[1]