React에서 state 관리

 

• React Hook
  
  • 함수형 컴포넌트에서 사용되는 몇가지 기술
  • 함수형 컴포넌트가 클래스형 컴포넌트를 사용할 수 있도록
  • 예: useState, useEffect, useReducer
  • 규칙
    • 최상위에서 호출해야 함
    • React 함수 내에서만 호출해야 함
    • 반복문이나 직접 만든 함수 내에서 사용불가
• useState
  • 두 개의 반환값 (현재state, set 함수)
    • set함수는 다음 렌더링에 대한 state 변수만 업데이트함
    • set함수 호출 후에도 state 변수에는 업데이트 전의 값이 담겨있음
  • 사용법

1. 컴포넌트 최상위 레벨에서 호출하여 state 변수 선언

import { useState } from 'react';

function stateTest(){
	const [myAge,setAge] = useState(초기값 ex.16);
}

2. 화면 업데이트

function handleClick(){
	setAge(28);
}

 

 

https://ko.react.dev/reference/react/useState#adding-state-to-a-component